动态下拉 Flask-wtf

Dynamic Drop Down Flask-wtf

我正在处理这个问题。我想我已经仔细研究了人们遇到过但似乎无法解决的类似问题。 我有一对下拉菜单:第一个有 3 个选项的列表,第二个用相同的列表填充,无论你从第一个中选择哪个。所有这些都有效。我的问题是第二个不会验证,抛出 'Not a valid choice' 错误。谷歌搜索让我怀疑对象类型存在问题。它显示为 str,我看到 SelectField 的默认行为是 coerce=unicode。我试图强迫 str 但没有成功。无论如何,我将不胜感激任何帮助。下面是我的相关代码:

template.py-

{% extends "header.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block body %}
<form method="POST" action="/form_test/">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <div class="form-group col-md-4 text-left">
        <h3 align="center">Router 1</h3>
            {{ wtf.form_field(form.isp_r1) }}
    </div>
    <div class="form-group col-md-4 text-left">
        <h3 align="center">Router 1</h3>
            {{ wtf.form_field(form.isp_r2) }}
    </div>
     <div class="container">
        <button type="submit" class="btn btn-primary" value="Create">Submit</button>
    </div>
</form>

forms.py

from flask_wtf import FlaskForm
from wtforms import BooleanField, StringField, IntegerField, SelectField
from wtforms.validators import InputRequired, required, Length, IPAddress, ValidationError, NumberRange
class test_form(FlaskForm):
    isp_r1 = SelectField('ISP', validators=[required()], coerce=str, choices=[("", "Please Choose"), ("1", "AT&T"), ("2", "Level3"), ("3", "Sprint")], render_kw={"placeholder": "San Antonio, TX", "onchange": "populateispwtf(this.id,'isp_r2')"})
    isp_r2 = SelectField('ISP', coerce=str, validators=[InputRequired()], choices=[("", "---")])

custom.js-

function populateispwtf(s1,s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == "1") {
        var optionArray = ["|",
                           "2|Level 3",
                           "3|Sprint",];
    } else if(s1.value == "2") {
        var optionArray = ["|",
                           "1|AT&T",
                           "3|Sprint",];
    } else if(s1.value == "3") {
        var optionArray = ["|",
                           "1|AT&T",
                           "2|Level 3",];

    } console.log(optionArray);
    for(var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}

这确实没有获得任何流量,但是为了任何可能遇到同样问题的人:

'Not a valid choice' 实际上指的是 wtform 本身的选项列表。 (选择=[('val1','Choice 1 Text'),('val2','Choice 2 Text')]等)。因为我在它已经呈现后使用 javascript 来填充选择字段,所以 html 改变了但可用的选择没有,就 wtforms 而言。解决方案在预验证中,我找到了解决方案 here so all credit to Mark Hildreth

我不会重复他说的话,因为我的解决方案是他的直接提升。我只是想指出他的情况,以防有人在动态填充的选择字段(和级联菜单)中挣扎,首先找到我的 post。