本文详解如何基于 bootstrap 构建支持多选的下拉菜单，通过嵌入复选框替代默认单选行为，并提供可直接运行的 html/js/css 完整示例及关键交互优化技巧。
在标准 HTML 中，原生 <select> 元素仅支持单选（<select>）或有限多选（<select multiple>），但其 UI 体验与常见设计需求不符——尤其当需要在紧凑下拉面板中勾选多个选项时，用户更期望看到类似“带复选框的下拉菜单”。Bootstrap 并未原生提供该组件，但可通过组合其下拉（Dropdown）与表单控件（Checkbox）轻松实现。
以下是一个完整、开箱即用的实现方案（基于 Bootstrap 3.3.7，兼容性良好）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多选下拉菜单</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 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>
<style>
.dropdown-menu {
max-height: 200px;
overflow-y: auto;
min-width: 160px;
}
/* 防止点击复选框时意外关闭下拉菜单 */
.dropdown-menu input,
.dropdown-menu label {
cursor: pointer;
}
</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">
✅ 已选：0 项
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="multiSelectDropdown">
<li><label class="checkbox"><input type="checkbox" value="option1"> 选项一</label></li>
<li><label class="checkbox"><input type="checkbox" value="option2"> 选项二</label></li>
<li><label class="checkbox"><input type="checkbox" value="option3"> 选项三</label></li>
<li><label class="checkbox"><input type="checkbox" value="option4"> 选项四</label></li>
<li><label class="checkbox"><input type="checkbox" value="option5"> 选项五</label></li>
</ul>
</div>
</div>
<script>
$(document).ready(function () {
// 关键：阻止复选框和标签事件冒泡，避免点击后自动收起下拉
$('.dropdown-menu input, .dropdown-menu label').on('click', function(e) {
e.stopPropagation();
});
// 可选增强：实时更新按钮文本，显示已选数量
$('.dropdown-menu input').on('change', function() {
const $checked = $('.dropdown-menu input:checked');
const count = $checked.length;
const $btn = $('#multiSelectDropdown');
$btn.html(`✅ 已选：${count} 项 <span class="caret"></span>`);
});
});
</script>
</body>
</html>✅ 核心要点说明：
- 事件拦截是关键：Bootstrap 下拉菜单默认在 click 事件冒泡至 .dropdown 容器时自动关闭。因此必须对 .dropdown-menu input 和 label 绑定 e.stopPropagation()，确保勾选操作不触发收起行为；
- 滚动支持：通过 max-height + overflow-y: auto 保证选项较多时仍保持下拉面板高度可控；
- 语义化与可访问性：使用 <label> 包裹 <input>，提升点击区域与无障碍支持；aria-labelledby 等属性保留，符合 WCAG 基础要求；
- 状态反馈建议：示例中加入了动态更新按钮文字的逻辑，便于用户感知当前选择结果，实际项目中还可扩展为显示具体选项名、触发回调函数或同步提交数据。
⚠️ 注意事项：
- 若使用 Bootstrap 4+ 或 5，.dropdown-menu 的结构略有差异（如需配合 dropdown-item），请将 <li><label>…</label></li> 替换为 <a class="dropdown-item"><label>…</label></a>，并调整 CSS 选择器；
- 移动端需额外测试触控响应，必要时添加 touchstart 事件监听；
- 如需表单提交，应将复选框 name 属性统一（如 name="selectedOptions"），后端即可接收为数组值。
该方案轻量、稳定、无需第三方插件，是快速落地多选下拉需求的高性价比实践路径。
