Bootstrap selectpicker联动时保留第二个选择器选中值问题

我来帮你搞定这个问题！核心问题就是你用empty()清空第二个选择器时，连带把选中状态也清除了——解决方案很简单：先缓存选中值，更新完选项后再恢复状态。

具体实现步骤 #

1. 在清空之前保存当前选中值
   在处理第一个选择器的change事件时，先把第二个选择器（adm_l_3）的当前选中值存起来。不管是单选还是多选，val()方法都能正确返回对应的值（单选是字符串，多选是数组）。

2. 执行清空和添加新选项的操作
   这部分和你原来的逻辑一致，用empty()清除旧选项，再添加新的选项内容（不管是静态生成还是AJAX获取的）。

3. 恢复选中状态并刷新组件
   把之前缓存的选中值赋值给第二个选择器，然后必须调用selectpicker('refresh')——因为Bootstrap Selectpicker是基于原生<select>的UI封装，原生元素的变化不会自动同步到美化后的UI上，刷新才能让修改生效。

完整代码示例 #

$('#adm_l_1').on('change', function() {
    // 第一步：保存第二个选择器的当前选中值
    const savedSelected = $('#adm_l_3').val();

    // 第二步：清空旧选项，这里替换成你实际的选项生成逻辑
    $('#adm_l_3').empty();
    // 示例：添加新选项（可以换成AJAX请求获取数据的逻辑）
    $('#adm_l_3').append(`
        <option value="opt1">新选项1</option>
        <option value="opt2">新选项2</option>
        <option value="opt3">新选项3</option>
    `);

    // 第三步：恢复选中状态并刷新组件
    $('#adm_l_3').val(savedSelected);
    $('#adm_l_3').selectpicker('refresh');
});

额外注意事项 #

• 如果原来的选中值在新选项列表中不存在，恢复后不会有选中状态（这是合理的，因为对应的选项已经被移除了）。如果你需要处理这种情况，可以在恢复前检查savedSelected是否存在于新选项的value中，再决定是否恢复或者给用户提示。
• 如果你是通过AJAX异步获取新选项，一定要把恢复状态的代码放在AJAX的success回调里，确保新选项已经添加完成再执行恢复操作。

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