本文介绍如何基于 bootstrap 构建支持多选的下拉菜单，通过在 dropdown-menu 中嵌入 checkbox 元素，并配合 jquery 阻止事件冒泡，确保点击复选框时下拉菜单不意外关闭。
在标准 HTML 中，原生
核心实现思路
-
结构层面：用 包裹触发按钮和
多选下拉菜单（Checkbox Dropdown） 注意事项与最佳实践
- ✅ 必须阻止事件冒泡：这是该方案能否正常工作的关键。若遗漏 e.stopPropagation()，每次点击 checkbox 都会触发 dropdown 的 hide 行为；
- ✅ 语义化与可访问性：使用
- ⚠️ Bootstrap 版本兼容性：上述代码基于 Bootstrap 3.3.7。如使用 Bootstrap 4/5，需改用 dropdown-menu 内部的 .dropdown-item 结构，并注意 data-bs-toggle 属性变更；
- ? 扩展建议：可进一步集成全选/取消全选按钮、搜索过滤、选中状态持久化（如 localStorage）、提交时序列化数据等；
- ? 替代方案提示：若项目已引入现代框架（Vue/React），推荐使用成熟的多选组件库（如 Vue Multiselect、React-Select），它们内置键盘导航、虚拟滚动与无障碍支持，开发效率与体验更优。
该方案轻量、稳定、易维护，适用于中后台系统中对多选下拉有基础交互需求的场景。掌握其原理后，亦可灵活适配其他 UI 框架或纯原生实现。
