烧瓶中的链式下拉列表，从sqlite数据库获取数据 [英] Chained Dropdown in flask, get data from sqlite database

问题描述

我正在尝试获取具有不同县的html select标签（从数据库中获取），当用户选择一个县时，我希望另一个选择标签启用并显示该县的城市（我将数据存储在sqlite数据库（县ID在城市数据库中）。我在Pycharm中使用python，带有flask，但没有找到任何好的教程。

I am trying to get a html select tag with different counties (getting from database), when the user have selected a county, I want another select tag to enable and show the cities in that county (I have the data in a sqlite database, where the county id is in the city database). I am using python in Pycharm, with flask and I haven't found any good tutorials.

是否有一种简单的方法来对烧瓶使用一些扩展？我看到了有关sijax的一些知识，但我从未理解过如何使用它。

Is there an easy way of using some extension to flask? I saw something about sijax, but I never understood how to use it.

我的代码是这样的，但我想必须创建城市部分通过一些JavaScript来完成：

The code I have is something like this, but I guess the city-part has to be created through some javascript thingy:

        <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插件，但是没有用，但这就是为什么我有

I tried a "chained"-javascipt plugin but it didn't work, but that's why I have class in the option tags.

现在，县和所有城市都被发送到html模板，但是我认为以后这不会持续下去，因为我想要还要在城市中添加另一个下拉菜单，因此我必须发送大量永远不会使用的数据。

Right now the counties and all cities are sent to the html template, but I don't think that will be sustainable later on because I want to add another dropdown with places in the cities as well, so then I have to send a lot of data that never will be used.

推荐答案

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

In your head, add a handler for changing the values of the selects:

<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 将该选定值发送到您的后端，例如：

This uses jquery.change to detect when the county select is changed and jquery.ajax to send that selected value to your backend, which would be something like:

@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 。

这篇关于烧瓶中的链式下拉列表，从sqlite数据库获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！