烧瓶中的Chained Dropdown，从sqlite数据库中获取数据

Question

我正在尝试获取具有不同县的 html 选择标签（从数据库中获取），当用户选择了一个县时，我想要另一个选择标签来启用并显示该县的城市（我有一个sqlite 数据库，其中县 id 在城市数据库中）。我在 Pycharm 中使用 python，带有烧瓶，但我还没有找到任何好的教程。

有没有一种简单的方法可以使用一些扩展来烧瓶？我看到了一些关于 sijax 的东西，但我一直不明白如何使用它。

我的代码是这样的，但我猜城市部分必须通过一些 javascript 东西来创建：

        <div class="form-group">
            <label for="inputCounty">County</label>
            <select class="form-control" id="select_county" name="select_county">
                <option value="">Choose county</option>
                {% for county in counties %}
                    <option value="{{ county.id }}">{{ county.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label for="inputCity">City</label>
            <select class="form-control" id="select_city" name="select_city">
                <option value="">Choose city</option>
                {% for city in cities %}
                    <option value="{{ city.id }}" class="{{ city.county }}">{{ city.name }}</option>
                {% endfor %}
            </select>
        </div>

我尝试了一个“链式”-javascipt 插件，但它不起作用，但这就是为什么我在选项标签中有类。

现在县和所有城市都被发送到 html 模板，但我认为这在以后是不可持续的，因为我想在城市中添加另一个下拉列表，所以我必须发送很多数据永远不会被使用。

Answer 1

在您的head 中，添加一个用于更改选择值的处理程序：

<script type="text/javascript">
    $("#select_county").change(function() {
        $.ajax({
            type: "POST",
            url: "{{ url_for('select_county') }}",
            data: {
                county: $("#select_county").val()
            },
            success: function(data) {
                $("#select_city").html(data);
            }
        });
    });
</script>

这使用jquery.change 检测县选择何时更改，并使用jquery.ajax 将选择的值发送到您的后端，类似于：

@app.route('/select_county', methods=['POST'])
def select_county():
    ret = ''
    for entry in ...your_database_query...:
        ret += '<option value="{}">{}</option>'.format(entry)
    return ret

这个<option>标签列表然后通过jquery.html插入到第二个选择中。