Question

行。我知道这已被多次解决，但我找不到一个有用的javascript示例的答案。

说我有这样的表格：

class MyForm(Form):
    category = SelectField("Category")
    issue = SelectField("Issue")

我需要的是在运行时在“类别”中选择的任何内容，以确定用户在问题下拉列表中看到的内容，而没有任何类型的POST。我知道如何从数据库查询中动态创建视图中的选项。我甚至已经根据类别选择创建了“问题选择”字典。

我不能为我的生活找出我需要的javascript，以便从类别下拉菜单中选择一些东西来确定问题下拉列表中的内容。

Answer 1

通过查看Flask jQuery AJAX Example处的示例，我找到了所需的信息 - - 它是一个极小的工作示例，几乎是一个 GIST或书籍章节。

Answer 2

我想出了一个非常接近jsbueno实现的例子。你可以在这里找到Gist。 .py文件是一个独立的示例。

在您的html模板中，使用jquery在单击选择字段时注册ajax请求。如果请求成功，则选择字段的html将使用新的选择选项进行更新（作为来自服务器的响应发送）。查看模板生成的实际HTML，以查看选择字段的外观。

<form action="" method="post" id="selectDevice" name="device">
    Nummber of Devices: {{ form.selectAmount(size=1) }}
    Select device: {{form.deviceAddress() }}
</form>
<script type="text/javascript" charset="utf-8">
$("#deviceAddress").click(function(){
    $.ajax({
        url: '/selectform',
        type: 'POST',
        data: $('#selectDevice').serialize(),
        success: function(selectOptions){
            $("#deviceAddress").empty();
            for (var i = 0; i < selectOptions.length; i++){
                $("#deviceAddress").append(
                    $("<option></option>")
                    .attr("value", selectOptions[i][0])
                    .text(selectOptions[i][1])
                );
            }
        }
    });
});
</script>

在服务器端，使用ajax post请求的路由。例如，此路由根据另一个表单字段更改选项（通过ajax请求中的数据标记发送的信息）。在WTForms中，选择字段选项是包含ID和名称的元组列表，我在python端保持相同。

@app.route('/selectform', methods=['POST'])
def updateselect():
    deviceAmount = int(request.form.get('selectAmount'))
    choices = [('device{}'.format(i), i) for i in range(deviceAmount)]
    response = make_response(json.dumps(choices))
    response.content_type = 'application/jsons'
    return response`

只有一条评论：ajax请求是在下拉和折叠时执行的。最后一部分当然不是必需的，可能有一种方法来构造jquery，所以它只在下拉列表中请求。

JavaScript / Ajax动态更新WTForms选择字段

2 个答案: