javascript - Flask 中的链式下拉列表，从 sqlite 数据库中获取数据

Question

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

有没有一种简单的方法可以使用 Flask 的一些扩展？我看到了一些关于 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 将标签插入到第二个选择中.