Flask Web应用分类与子分类级联下拉菜单实现问题咨询

1. 新增Flask后端接口，提供子分类查询能力 #

首先在Flask路由中新增一个接口，接收分类参数，返回对应子分类的JSON数据，注意使用参数化查询避免SQL注入：

from flask import request, jsonify

@app.route('/get_subcategory', methods=['POST'])
def get_subcategory():
    # 获取前端传递的分类值
    category = request.form.get('category')
    cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
    # 参数化查询对应分类的子分类数据
    cursor.execute('SELECT subcategory FROM subcategory WHERE category = %s', [category])
    subcategory = cursor.fetchall()
    return jsonify(subcategory)

2. 调整HTML结构，补充下拉菜单B的代码 #

给下拉菜单A增加id方便绑定事件，同时补充下拉菜单B的初始结构：

<!-- 给原有下拉A新增id -->
<select id="category-select" class="form-control" name="bal-edit-category" required>
        <option disabled selected value> {{ row.category }} </option>
        {% for category in category %}
        <option value="{{ category.category }}">{{ category.category }} 
        </option>
        {% endfor %}
</select>

<!-- 新增下拉菜单B代码 -->
<select id="subcategory-select" class="form-control" name="bal-edit-subcategory" required>
    <option disabled selected value>请先选择分类</option>
</select>

3. 新增JS逻辑实现联动效果 #

使用原生JS实现即可，不需要额外依赖，监听下拉A的选中变化，请求接口更新下拉B的选项。如果模态框是动态渲染的，使用事件委托绑定即可兼容：

document.addEventListener('change', function(e) {
    if (e.target.id === 'category-select') {
        const selectedCategory = e.target.value;
        const subSelect = document.getElementById('subcategory-select');
        // 清空原有选项，显示加载状态
        subSelect.innerHTML = '<option disabled selected value>加载中...</option>';
        
        // 发起请求获取对应子分类
        fetch('/get_subcategory', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'category=' + encodeURIComponent(selectedCategory)
        })
        .then(res => res.json())
        .then(subList => {
            // 清空加载提示
            subSelect.innerHTML = '';
            // 插入新的子分类选项
            subList.forEach(item => {
                const option = document.createElement('option');
                option.value = item.subcategory;
                option.textContent = item.subcategory;
                subSelect.appendChild(option);
            })
        })
        .catch(err => {
            subSelect.innerHTML = '<option disabled selected value>加载失败，请重试</option>';
            console.error('子分类加载错误:', err);
        })
    }
})

可选优化点 #

• 如果分类和子分类数据量很小，可以直接在首次渲染页面时把所有子分类以JSON格式传到前端，直接在前端做过滤，不需要发起后端请求，性能更好。
• 如果使用jQuery，可以用$.post方法替换fetch请求，代码更简洁。
• 编辑场景下需要回显子分类的话，在页面首次渲染时拿到当前的分类值，主动触发一次change事件加载对应子分类，再设置选中值即可。

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