本文介绍如何基于 bootstrap 构建支持多选的下拉菜单，通过在 dropdown-menu 中嵌入 checkbox 元素，并配合 jquery 阻止事件冒泡，确保点击复选框时下拉菜单不意外关闭。
在标准 HTML 中，原生 <select> 元素仅支持单选（<select>）或有限多选（<select multiple>），但其 UI 体验与常见设计需求不符——尤其当需要在紧凑的下拉面板中提供可勾选、可搜索、带滚动的多选项时，原生控件力不从心。此时，借助 Bootstrap 的下拉组件（Dropdown）封装自定义内容，是构建「类下拉+多选复选框」交互的成熟实践。
核心实现思路
- 结构层面：用 <div class="dropdown"> 包裹触发按钮和 <ul class="dropdown-menu">；
- 内容层面：在 <li> 中嵌入 <label><input type="checkbox"> + 文本</label>，提升点击可访问性；
- 交互层面：必须阻止复选框及标签的点击事件向上冒泡至 dropdown toggle，否则会触发 hide.bs.dropdown 导致菜单立即收起；
- 样式层面：为 .dropdown-menu 设置 max-height 和 overflow-y: auto，支持选项较多时滚动浏览。
完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多选下拉菜单（Checkbox Dropdown）</title>
<!-- Bootstrap 3.3.7 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-menu {
max-height: 200px;
overflow-y: auto;
min-width: 180px;
}
.dropdown-menu label {
display: block;
padding: 6px 20px;
cursor: pointer;
}
.dropdown-menu input[type="checkbox"] {
margin-right: 8px;
position: relative;
top: -1px;
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="multiSelectDropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
请选择选项 <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="multiSelectDropdown">
<li><label><input type="checkbox" value="option1"> 选项一</label></li>
<li><label><input type="checkbox" value="option2"> 选项二</label></li>
<li><label><input type="checkbox" value="option3"> 选项三</label></li>
<li><label><input type="checkbox" value="option4"> 选项四</label></li>
<li><label><input type="checkbox" value="option5"> 选项五</label></li>
<li><label><input type="checkbox" value="option6"> 选项六</label></li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
// 关键：阻止 checkbox 和 label 点击事件冒泡，避免关闭下拉菜单
$('.dropdown-menu input[type="checkbox"], .dropdown-menu label').on('click', function(e) {
e.stopPropagation();
});
// ✅ 可选增强：监听勾选变化，实时获取选中值
$('.dropdown-menu input[type="checkbox"]').on('change', function() {
const selected = $('.dropdown-menu input[type="checkbox"]:checked')
.map((_, cb) => cb.value)
.get();
console.log('当前选中:', selected);
// 示例：更新按钮文字为“已选 X 项”
$('#multiSelectDropdown').text(
selected.length ? `已选 ${selected.length} 项` : '请选择选项'
);
});
});
</script>
</body>
</html>注意事项与最佳实践
- ✅ 必须阻止事件冒泡：这是该方案能否正常工作的关键。若遗漏 e.stopPropagation()，每次点击 checkbox 都会触发 dropdown 的 hide 行为；
- ✅ 语义化与可访问性：使用 <label> 包裹 <input>，既提升点击热区，也利于屏幕阅读器识别；
- ⚠️ Bootstrap 版本兼容性：上述代码基于 Bootstrap 3.3.7。如使用 Bootstrap 4/5，需改用 dropdown-menu 内部的 .dropdown-item 结构，并注意 data-bs-toggle 属性变更；
- ? 扩展建议：可进一步集成全选/取消全选按钮、搜索过滤、选中状态持久化（如 localStorage）、提交时序列化数据等；
- ? 替代方案提示：若项目已引入现代框架（Vue/React），推荐使用成熟的多选组件库（如 Vue Multiselect、React-Select），它们内置键盘导航、虚拟滚动与无障碍支持，开发效率与体验更优。
该方案轻量、稳定、易维护，适用于中后台系统中对多选下拉有基础交互需求的场景。掌握其原理后，亦可灵活适配其他 UI 框架或纯原生实现。
