本文详解在 bootstrap-select（v1.14+）中彻底清空多选下拉框并动态重载选项的可靠方法，重点解决因版本兼容性（如 beta3 的已知 bug）导致的残留选中状态、ui 不同步等常见问题。

Bootstrap-Select 是基于原生 的增强型下拉组件，但在操作 DOM 后需显式调用 API 方法同步 UI 状态。直接使用 .empty() 或 .html('') 仅清除底层 的 元素，但不会自动重置其内部状态缓存和渲染后的下拉面板，极易引发“视觉残留”——例如看似已清空，点击选项时却意外恢复旧选中项。

✅ 推荐标准流程（兼容 v1.13.18 ~ v1.14.0-beta2）：

// 1. 清空原生 select 的所有 option
$('#mySelect').empty();

// 2. 重置选择状态（关键！）
$('#mySelect').val([]).trigger('change');

// 3. 刷新 selectpicker UI
$('#mySelect').selectpicker('refresh');

⚠️ 重要注意事项：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 避免使用 beta3 版本：已知 v1.14.0-beta3 存在严重状态同步 Bug（如 .empty() + .refresh() 后仍显示旧选中项），建议降级至稳定版 v1.13.18 或 v1.14.0-beta2；
• 动态添加选项后务必触发 change：若通过 .append() 插入新 ，必须紧接着执行 .val([]).trigger('change') 再 .selectpicker('refresh')，否则新选项可能无法被选中；
• 批量操作优化：大量选项更新时，可先 .selectpicker('destroy')，操作 DOM 后再 .selectpicker() 重建，避免多次刷新开销。

? 验证是否成功：操作后可通过 $('#mySelect').val() 检查返回值是否为 null 或空数组 []，并观察下拉面板中无高亮/勾选标记。

综上，核心原则是：DOM 清理 → 状态重置 → UI 刷新，三步缺一不可；同时务必选用经验证稳定的版本，方能确保多选组件行为完全可控。