bootstrap multiselect 下拉菜单无法展开，通常并非代码逻辑错误，而是因 bootstrap 5+ 与 jquery 依赖的插件不兼容所致；需降级至 bootstrap 4.x（推荐 v4.6.2）并确保正确加载 jquery、bootstrap js（非 bundle）、及 multiselect 插件资源。
bootstrap multiselect 下拉菜单无法展开，通常并非代码逻辑错误，而是因 bootstrap 5+ 与 jquery 依赖的插件不兼容所致；需降级至 bootstrap 4.x（推荐 v4.6.2）并确保正确加载 jquery、bootstrap js（非 bundle）、及 multiselect 插件资源。
Bootstrap Multiselect 是一个基于 jQuery 和 Bootstrap 的经典多选下拉组件，但其官方版本仅兼容 Bootstrap 3.x 和 4.x，完全不支持 Bootstrap 5+（因其移除了 jQuery 依赖，重构了 JavaScript API）。你遇到的“点击无响应、控制台无报错、样式正常但下拉不展开”正是典型兼容性失效现象——插件尝试调用已不存在的 Bootstrap 方法（如 $.fn.dropdown.Constructor），静默失败。
✅ 正确配置要点（以 Bootstrap 4.6.2 + jQuery 3.6.4 为例）
确保资源加载顺序严格遵循：jQuery → Bootstrap JS（非 bundle）→ bootstrap-multiselect JS/CSS，且 Bootstrap 版本必须 ≤ 4.6.2：
<!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 4.6.2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<!-- bootstrap-multiselect CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.16/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>
<!-- jQuery 必须在最前 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Bootstrap JS（注意：用 bootstrap.min.js，不是 bootstrap.bundle.min.js） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<!-- bootstrap-multiselect JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.16/dist/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function() {
$('#myMultiselect').multiselect({
// 可选：启用搜索、分组等增强功能
enableFiltering: true,
includeSelectAllOption: true,
nonSelectedText: '请选择选项...'
});
});
</script>
</body>
</html>⚠️ 关键注意事项
- 禁止使用 Bootstrap 5+：bootstrap@5.x 或 bootstrap@6.x 会导致插件完全失效，即使样式渲染正常；
- 禁用 bootstrap.bundle.min.js：它剔除了 Popper 和 jQuery 依赖模块，而 multiselect 需要原生 bootstrap.min.js 中的 Dropdown、Tooltip 等 jQuery 插件支持；
-
版本锁定建议：
- jQuery：3.6.x（兼容性最佳，避免 4.x 的破坏性变更）
- Bootstrap：4.6.2（最后一个稳定版，全面支持 jQuery 插件）
- bootstrap-multiselect：0.9.16（最新兼容版，修复了多项 Bootstrap 4 兼容问题）
- 调试技巧：在浏览器控制台执行 typeof $.fn.multiselect 应返回 "function"；若为 undefined，说明 JS 加载失败或顺序错误。
✅ 替代方案（面向新项目）
若项目已采用 Bootstrap 5/6，强烈建议迁移到现代替代方案：
- choices.js（纯 JS，无 jQuery 依赖，支持 Bootstrap 5 主题）
- tom-select（轻量、可定制、无障碍友好）
- Bootstrap 5 原生 form-select + 自定义多选逻辑（配合 data-bs-toggle="dropdown" 手动实现）
兼容性问题无捷径——匹配正确的技术栈组合才是根本解法。务必验证各库版本间的官方兼容声明，避免“看似加载成功，实则功能瘫痪”的陷阱。
