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

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

简单。

1. 在烧瓶中创建一个应该返回预期输出的函数 (API)。
2. 编写一个onchange() 函数并将其与下拉列表链接。因此，如果您更改任何值，它将触发该功能。
3. 通过 AJAX 从后端获取基于更改值的新值 打电话。
4. 编写函数以将返回值更新到下一个下拉列表。

这里是一个简单的 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);
    });
})