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插入到第二个选择中。

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

1 个答案: