bootstrap multiselect 下拉菜单无法展开，通常因 bootstrap 版本不兼容（尤其是 v5+ 与 jquery 依赖冲突）导致；正确做法是使用兼容的 bootstrap v3.x + jquery 组合，并确保加载顺序和脚本完整性。
bootstrap multiselect 下拉菜单无法展开，通常因 bootstrap 版本不兼容（尤其是 v5+ 与 jquery 依赖冲突）导致；正确做法是使用兼容的 bootstrap v3.x + jquery 组合，并确保加载顺序和脚本完整性。
Bootstrap Multiselect 是一个广受欢迎的 jQuery 插件，用于增强原生 <select multiple> 元素的交互体验。但其仅官方支持 Bootstrap 3.x，与 Bootstrap 4/5 完全不兼容——这是绝大多数“点击无反应”问题的根本原因。
? 核心问题：版本冲突
- Bootstrap Multiselect（v1.x）严重依赖 jQuery 和 Bootstrap 3 的 JS 组件（如 Dropdown、Popover）；
- Bootstrap 5 移除了 jQuery 依赖，并重构了所有 JavaScript 插件（如 Dropdown 使用 @popperjs/core），导致 bootstrap-multiselect.js 中调用的 $.fn.dropdown 等方法不存在，脚本静默失败（无报错，但事件绑定失效）；
- 即使 CSS 正常渲染（下拉按钮可见），JS 初始化失败也会导致点击无响应。
✅ 正确配置方案（推荐 Bootstrap 3.4.1）
以下为经验证可用的最小可行配置（已去除冗余、修正 CDN 路径）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Multiselect 兼容版示例</title>
<!-- Bootstrap 3.4.1 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<!-- Bootstrap Multiselect CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@1.1.2/dist/css/bootstrap-multiselect.css">
</head>
<body>
<div class="container mt-4">
<select id="myMultiselect" multiple="multiple" class="form-control">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
<!-- 必须按此顺序加载 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Bootstrap 3 JS（非 bundle！必须用 bootstrap.min.js，含 dropdown.js） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Multiselect JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@1.1.2/dist/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function() {
$('#myMultiselect').multiselect({
buttonClass: 'btn btn-default',
includeSelectAllOption: true,
enableFiltering: true
});
});
</script>
</body>
</html>⚠️ 关键注意事项
- 严禁混用 Bootstrap 4/5：即使只引入 CSS，若 JS 用的是 v4/v5（如 bootstrap.bundle.min.js），仍会因缺少 jQuery 插件接口而失效；
- JS 加载顺序不可颠倒：jQuery → Bootstrap 3 JS → bootstrap-multiselect.js；
- 不要使用 bootstrap.bundle.min.js：它剔除了 dropdown.js 等依赖插件，而 Multiselect 显式调用 $.fn.dropdown；
- 若需现代化替代方案，建议迁移到 Choices.js 或 Tom Select（原 selectize.js），它们原生支持 Bootstrap 5 且无需 jQuery。
✅ 验证是否生效
初始化后检查：
- 浏览器开发者工具 → Elements 面板中，<select> 应被替换为 .btn-group 包裹的自定义结构；
- 控制台执行 $('#myMultiselect').data('multiselect') 应返回实例对象；
- 点击按钮时，应出现带复选框的下拉面板，且可正常勾选/搜索。
兼容性不是妥协，而是技术栈协同的必然要求。坚持使用官方支持的组合，远比调试静默失败更高效可靠。
