Bootstrap Multiselect点击无反应：下拉菜单无法展开求助

问题根源 #

你当前使用的bootstrap-multiselect@0.9.13是针对Bootstrap 3开发的版本，和Bootstrap 5的DOM结构、事件机制存在兼容性冲突，这就是下拉菜单点击后无法展开但控制台无报错的原因——组件尝试调用Bootstrap 3的下拉相关方法，但Bootstrap 5中这些实现已经改变，却没有触发错误提示。

解决方案 #

方案1：使用适配Bootstrap 5的Multiselect分支版本

替换原有的Multiselect资源为专门适配Bootstrap 5的版本，以下是修正后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Multiselect Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap5-multiselect@1.2.2/dist/css/bootstrap-multiselect.min.css">
</head>
<body>

    <select id="minimal-multiselect" multiple="multiple">
        <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>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap5-multiselect@1.2.2/dist/js/bootstrap-multiselect.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#minimal-multiselect').multiselect({
                includeSelectAllOption: true // 可选配置，按需添加
            });
        });
    </script>

</body>
</html>

方案2：降级到Bootstrap 3

如果必须使用原版本的Bootstrap Multiselect，可以将Bootstrap版本降级到3.x，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 3 Multiselect Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.13/dist/css/bootstrap-multiselect.css">
</head>
<body>

    <select id="minimal-multiselect" multiple="multiple">
        <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>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.13/dist/js/bootstrap-multiselect.js"></script>
    <script>
        $(document).ready(function() {
            $('#minimal-multiselect').multiselect();
        });
    </script>

</body>
</html>

验证要点 #

• 替换资源后刷新页面，点击组件检查下拉菜单是否正常展开
• 若仍有异常，查看浏览器控制台是否有资源加载失败或新的报错信息
• 确保jQuery版本与所选Bootstrap版本兼容（jQuery 3.x适配Bootstrap 3和5都没问题）

内容的提问来源于stack exchange，提问作者Dominik Miskovic