Bootstrap+jQuery+Flask+Jinja下三级联动动态下拉菜单实现咨询

实现思路 #

你可以直接用Jinja把完整的联动数据注入前端JS变量，全程不用额外请求后端，实现非常简单，完全适配你的动态数据场景：

具体实现步骤

1. 把联动数据注入前端JS
   在你的HTML模板里添加script标签，用Jinja的tojson过滤器把后端传的options字典直接转成JS可识别的对象：

<script>
const fullOptions = {{ options | tojson | safe }};
</script>

2. 编写jQuery联动逻辑
   监听前两级下拉框的选择事件，动态更新下级下拉框的选项：

$(document).ready(function() {
    // 监听第一级下拉选择，更新第二级选项
    $('#dropdownA').change(function() {
        let currentA = $(this).val();
        let bOptions = Object.keys(fullOptions[currentA]);
        // 清空原有第二级选项
        $('#dropdownB').empty();
        // 插入新的第二级选项
        bOptions.forEach(item => {
            $('#dropdownB').append(`<option value="${item}">${item}</option>`);
        });
        // 主动触发第二级下拉的change事件，同步更新第三级选项
        $('#dropdownB').change();
    });

    // 监听第二级下拉选择，更新第三级选项
    $('#dropdownB').change(function() {
        let currentA = $('#dropdownA').val();
        let currentB = $(this).val();
        let cOptions = fullOptions[currentA][currentB];
        // 清空原有第三级选项
        $('#dropdownC').empty();
        // 插入新的第三级选项
        cOptions.forEach(item => {
            $('#dropdownC').append(`<option value="${item}">${item}</option>`);
        });
    });

    // 页面加载完成后初始化三级选项，避免初始值无效
    $('#dropdownA').change();
});

3. 调整原模板代码
   把原模板里dropdownB和dropdownC的Jinja循环渲染代码删掉，留空select标签即可，所有选项都会由JS动态生成，避免初始值和联动逻辑冲突。

备选方案（数据量较大时使用）

如果你的联动数据量级非常大，一次性注入前端会拖慢页面加载，可以改用AJAX异步拉取的方式：

• 后端新增两个接口，分别接收第一级选项值返回对应第二级选项、接收一二级选项值返回对应第三级选项，返回JSON格式
• 把上面代码中更新选项的逻辑替换为AJAX请求，拿到返回值后再渲染对应下拉框即可

两种方案都可以保证前端用户只能选择合法的组合，从根源上避免无效提交导致的空白页问题。

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