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

JavaScript/Ajax to Dynamically Update WTForms Select Field

本文关键字：WTForms 选择 字段 更新 动态 Ajax JavaScript      更新时间：2023-09-26

好。我知道这个问题已经解决了很多次，但我找不到一个有用的javascript示例来解决。

假设我有这个表格：

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

我需要的是在运行时在"类别"中选择的内容，以确定用户在问题下拉列表中看到的内容，而无需任何形式的POST。我知道如何通过数据库查询在视图中动态创建选项。我甚至创建了一个基于类别选择的"问题选择"词典。

我一辈子都想不出我需要的javascript，这样从类别下拉列表中选择某个内容就可以决定问题下拉列表中的内容。

我通过查看Flask jQuery AJAX example--这是一个最小的工作示例，几乎是GIST或书籍章节。

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

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

<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，使其只在下拉列表中请求。

相关文章：