本文介绍如何基于 bootstrap 构建支持多选的下拉菜单，通过在下拉项中嵌入复选框（checkbox），并配合 jquery 阻止事件冒泡，确保点击复选框时下拉菜单不意外关闭。
在标准 HTML 中，原生 <select> 元素仅支持单选（<select>）或按住 Ctrl/Meta 多选（<select multiple>），但无法以“下拉+复选框”的交互形式呈现——而这恰恰是许多管理后台、筛选面板中的高频需求。借助 Bootstrap 框架，我们可轻松构建视觉统一、行为可控的多选下拉组件。
核心实现原理
关键在于：
- 使用 Bootstrap 的 .dropdown 结构替代原生 <select>；
- 在 .dropdown-menu 的每个 <li> 中嵌入 <label><input type="checkbox">...</label>，提升可点击区域与无障碍支持；
- 必须阻止复选框及标签的点击事件向上冒泡，否则会触发 dropdown-toggle 的隐藏逻辑，导致菜单闪退。
完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 多选下拉菜单</title>
<!-- Bootstrap CSS (v3.3.7) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</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 class="checkbox"><input type="checkbox" value="1"> 选项一</label></li>
<li><label class="checkbox"><input type="checkbox" value="2"> 选项二</label></li>
<li><label class="checkbox"><input type="checkbox" value="3"> 选项三</label></li>
<li><label class="checkbox"><input type="checkbox" value="4"> 选项四</label></li>
<li><label class="checkbox"><input type="checkbox" value="5"> 选项五</label></li>
</ul>
</div>
</div>
<!-- jQuery + Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 关键：阻止事件冒泡，防止菜单关闭 -->
<script>
$(document).ready(function() {
$('.dropdown-menu input[type="checkbox"], .dropdown-menu label').on('click', function(e) {
e.stopPropagation(); // 阻断事件向上传播至 dropdown-toggle
});
// ✅ 可选增强：同步更新按钮文字（显示已选项数量或名称）
$('.dropdown-menu input[type="checkbox"]').on('change', function() {
const checked = $('.dropdown-menu input[type="checkbox"]:checked');
const btnText = checked.length === 0
? '请选择选项'
: `已选 ${checked.length} 项`;
$('#multiSelectDropdown').html(`${btnText} <span class="caret"></span>`);
});
});
</script>
<!-- 可选：限制下拉高度，启用滚动 -->
<style>
.dropdown-menu {
max-height: 200px;
overflow-y: auto;
}
</style>
</body>
</html>注意事项与最佳实践
- ✅ 必须引入 jQuery 和 Bootstrap JS/CSS（本例使用 v3.3.7，兼容性好；若用 Bootstrap 5，需改用 Popper + 手动控制下拉逻辑）；
- ✅ e.stopPropagation() 是核心，不可省略；仅 e.preventDefault() 不足以解决问题；
- ✅ 推荐为每个 <input> 添加 value 属性，便于后续通过 $('input:checked').map(...) 提取选中值；
- ⚠️ Bootstrap 3 的 .checkbox 类需配合 <label> 使用，确保样式正确；若使用 Bootstrap 4/5，请改用 form-check 相关类；
- ? 如需服务端提交，建议额外添加隐藏字段或通过 AJAX 收集选中值，而非依赖表单自动序列化（因复选框不在 <form> 原生控件流中）。
该方案兼顾语义清晰性、交互稳定性与视觉一致性，是构建专业级多条件筛选器的轻量可靠选择。
