如何用Flask实现两级联动动态下拉列表并获取提交的选中值

实现方案 #

你需要对现有代码做3处修改即可实现需求：

1. 修改app.py中的index路由，新增表单提交处理逻辑 #

原来的index路由仅处理GET请求加载品牌列表，现在需要补充POST请求的处理逻辑，获取两个下拉框的提交值，查询对应名称后回传给页面展示：

@app.route('/', methods=["POST","GET"])
def index():
    carbrands = Carbrands.query.all()
    selected_brand = None
    selected_model = None
    if request.method == 'POST':
        # 读取表单提交的两个下拉框选中值
        brand_id = request.form.get('search_category')
        model_id = request.form.get('sub_category')
        # 根据选中的ID查询对应的品牌、车型名称
        if brand_id:
            selected_brand = Carbrands.query.filter_by(brand_id=brand_id).first()
        if model_id:
            selected_model = Carmodels.query.filter_by(model_id=model_id).first()
    return render_template('index.html', carbrands=carbrands, 
                          selected_brand=selected_brand, selected_model=selected_model)

2. 修复index.html中的jQuery冗余渲染问题 #

原有Ajax回调逻辑存在重复渲染的问题，会导致页面生成两个车型下拉框，可能造成提交时取值异常，修改JS部分如下：

$(document).ready(function() {
 $('#search_category_id').change(function(){
        $.post("/get_child_categories", {
         parent_id: $('#search_category_id').val()
        }, function(response){ 
                // 直接替换内容即可，删除冗余的append操作
                $('#show_sub_categories').html(response.htmlresponse);
        });
        return false;
    });
}); 

3. 在index.html中新增提交结果展示区域 #

在表单的提交按钮下方添加结果展示代码，提交后就会显示用户选中的品牌和车型：

<button type="submit" class="btn btn-primary">Submit</button>
<!-- 新增选中结果展示区域 -->
{% if selected_brand and selected_model %}
<div class="alert alert-success" style="margin-top: 20px;">
  您选中的汽车品牌：{{ selected_brand.brand_name }}<br>
  您选中的对应车型：{{ selected_model.car_models }}
</div>
{% endif %}
</form>

修改完成后重启服务，选中品牌和车型点击提交，就能看到对应的选中结果了。

内容的提问来源于stack exchange，提问作者Ramiro