在烧瓶中链式下拉，从sqlite数据库获取数据。

Question

我试图获得一个具有不同县的html选择标记(从数据库中获取)，当用户选择了一个县时，我想要另一个select标记来启用并显示该县中的城市(我将数据保存在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检测何时更改县select，使用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>将这个<option>标记列表插入到第二个select中。