选择一个下拉列表后，更改另一个下拉列表（数据是动态的）

Question

我正在使用 Booststrap + JQuery + Flask + Jinja 开发一个项目。目前我有三个静态下拉菜单，我想将其动态化（在下拉菜单 A 中选择选项 X，下拉菜单 B 的值已更改。在下拉菜单 B 中选择选项 X 后，下拉菜单 C 的值已更改）。

我有一本来自 Flask 的字典，其中下拉菜单作为键，每个选项的选项作为值，这是我的代码（这是一个 jinja 模板）：

<form method="get" action="/some_flask_function" >
    <div class="container-fluid">
        <div class="form-group row">
            <div class="col">
                <label for="dropdownA">Dropdown A</label>
                <select class="form-control" id="dropdownA" name="dropdownA">
                {% for value in options['dropdownA'] %}
                    <option>{{ value }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col">
                <label for="dropdownB">dropdownB</label>
                <select class="form-control" id="dropdownB" name="dropdownB">
                {% for value in options['dropdownB'] %}
                    <option>{{ value }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col">
                <label for="dropdownC">dropdownC</label>
                <select class="form-control" id="dropdownC" name="dropdownC">
                {% for value in options['dropdownC'] %}
                    <option>{{ value }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col-xs">
                <input type="submit"  value="Search" class="btn btn-primary">
            </div>
        </div>
    </div>
</form>

这非常有效，但如果您在提交表单时选择了不存在的组合，页面将保持空白。我想让这不可能。

现在我把选项字典的结构改成了这样（所以我可以知道有效的组合）：

options = {
    choiceA: {
        versionA: ['one', 'two', 'three'],
        versionB: ['four, five, six']
    },
    choiceB: {
        versionC: ['seven', 'eight'],
        versionD: ['nine']
    }
}

我想在第一个下拉列表中显示：choiceA 和 choiceB，如果选择 choiceB，第二个将显示 versionC 和 versionD，如果选择 versionC，第三个下拉列表将显示 7 和 8。

您有方法的想法吗？我看到的所有类似问题都取决于数据是静态的并通过 JQuery 附加它。至少为解决方案指出正确的方向将是一个巨大的帮助。

Answer 1

简单。

在 flask 中创建一个应该 return 预期输出的函数 (API).
编写一个 onchange() 函数并 link 它与下拉菜单。因此，如果您更改任何值，它将触发该功能。
通过AJAX从后端根据更改后的值获取新值打电话。
编写函数以将 returned 值更新到下一个下拉列表。

这里是JS函数的一个简单例子。

$('#id').on('change', function(){
    select_value = this.selected   # get the selected value
    $.ajax({
      url: url,
      method: "POST", # or get
      data: {'value': select_value},
      dataType: 'json',
    }).done(function(response) {
       change_dropdown(response) #create this function to change the dropdown
    }).fail(function (error) {
      alert(error);
    });
})

选择一个下拉列表后，更改另一个下拉列表（数据是动态的）

After selecting a dropdown, change another dropdown (the data is dynamic)

jquery

jinja2

flask

bootstrap-4