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

Question

我正在尝试获取具有不同县的 html select 标签（从数据库中获取），当用户 select 编辑了一个县时，我想要另一个 select 标记以启用并显示该县的城市（我在 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>

我尝试了 "chained"-javascipt 插件，但它没有用，但这就是为什么我在选项标签中有 class 的原因。

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

Answer 1

在您的 head 中，添加用于更改 select 值的处理程序：

<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 to detect when the county select is changed and jquery.ajax 将 selected 值发送到您的后端，类似于：

@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> 标签列表然后插入到第二个 select 到 jquery.html。

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

Chained Dropdown in flask, get data from sqlite database

javascript

python

sqlite

flask

drop-down-menu