Javascript 如何在flask应用程序的选择框中的onchange事件上运行ajax请求

我有一个烧瓶应用程序，其中有许多选择框。每个选择框都需要根据上一个选择框中的选择填充数据。我计划为此使用ajax。必须根据

onchange

事件提交每个选择框。还有一个最终表单提交按钮，一旦所有选择框都选择了某个值，就会提交该按钮

javascript:

---

如何将数据库查询结果填充到下一个选择框中？一旦所有的选择框都选择了一些数据，我还需要进行最终提交。

首先，让你的第二个和第三个选择框没有选项

然后做如下事情：

$（document）.on（'onchange'，'）。选择1'，函数（）{
$.ajax({
类型：“POST”，
url:“/sample.file.name”，
数据：$（this.val（）；
},
成功：功能（res）{
console.log（res）；//将其附加到下一个selectbox。
},
)};
});

在/sample.file.name文件中：

#选择具有post参数命名数据的项目

#然后用标签打印它

=>这样做两次，将其应用于第二个选择框。
我可以将ajax的输出作为python列表发送到前端，并使用for循环在选择选项中显示它吗
    $(function() {
    $('select1').select(function() {
        $.ajax({
            url: '/getdata',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

</script>

<form method="post" action="/getdata">
    Project : <select name="select1" required>
    <option></option>
    {% for p in project %}
    {% for i in p %}
    <option>{{ i }}</option>
    {% endfor %}
    {% endfor %}
</select>
</div>
<div class="col-md-6">
    Task : <select name="category" required>
    <option>----</option>
    {% for p in task %}
    {% for i in p %}
    <option>{{ i }}</option>
    {% endfor %}
    {% endfor %}
</select></div></div>
 <div class="row p-t-20">
<div class="col-md-6">
    Subtask : <select name="category" required>
    <option>----</option>
</select></div>
<div class="col-md-6">   
    Category : <select name="category" required>
    <option>----</option>
</select></div></div></from>

@tt.route('/ti',methods = ['POST', 'GET'])  
def report():
    return render_template('ti.html')
@tt.route('/getdata',methods = ['POST', 'GET']) 
def report():
    project = request.form['select1']
    ~~~ Database codes ~~~~
    return render_template(task=data)