Bootstrap Multiselect是否仍兼容？我的多选择下拉菜单实现异常

尝试使用David Stutz的Bootstrap多选择下拉插件实现校区信息显示切换，但运行后仅显示普通下拉框，无预期的复选框样式。插件仓库最后更新于2022年，疑问是否兼容当前Razor、ASP.NET Core和C#，或是代码存在错误。

已实现代码 #

资源引入 #

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />

下拉菜单HTML #

<select id="campusMultiSelect"
        multiple="multiple">
    <option value="Campus1">Campus 1</option>
    <option value="Campus2">Campus 2</option>
    <option value="Campus3">Campus 3</option>
</select>

校区区块HTML #

<div id="Campus1"
     class="rounded">
    // Campus 1 information goes here
</div>
// <div> for Campus 2 and 3 go here

JavaScript代码 #

<script type="text/javascript">
    $(function () {
        $('#campusMultiSelect').multiselect({
            includeSelectAllOption: true
        });

        $('#campusMultiSelect').change(function () {
            // Get the selected values
            var selectedValues = $(this).val();

            // Define an array of campus IDs to toggle
            var campusIDs = ['Campus1', 'Campus2', 'Campus3'];

            // Iterate through the campus IDs and toggle their visibility
            campusIDs.forEach(function (campusID) { 
                var showContent = selectedValues && 
                                  selectedValues.indexOf(campusID) !== -1;
                $('#' + campusID).toggle(showContent);
            });
        });
    });
</script>

排查与解决方案 #

1. 资源加载问题（最可能原因） #

• 修正资源顺序：插件CSS必须在插件JS之前加载，当前你把bootstrap-multiselect.css放在了JS之后，调整顺序如下：

  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
  

• 检查资源路径：打开浏览器开发者工具（F12）→「网络」标签，查看所有资源的加载状态，若出现404错误，说明文件路径或文件名有误，需修正路径。
• 版本兼容性测试：该插件2022年的版本主要适配Bootstrap 4.x和jQuery 3.x，若你使用了最新的Bootstrap 5.3+或jQuery 3.7+，可能存在小冲突。可暂时替换为插件文档推荐的稳定版本（如Bootstrap 4.6、jQuery 3.6）验证。

2. ASP.NET Core/Razor兼容性说明 #

该插件是纯前端工具，仅依赖HTML/CSS/JS，与后端的ASP.NET Core、Razor、C#无直接关联——Razor仅负责渲染前端HTML结构，只要最终输出的HTML符合插件要求，就能正常运行，因此兼容性问题可以排除。

3. 额外调试与优化 #

• 控制台调试：在浏览器控制台手动执行$('#campusMultiSelect').multiselect()，若报错则直接定位问题（如jQuery未加载、插件文件缺失）。
• 补充初始化配置：添加基础配置项确保样式正常触发，比如：

  $('#campusMultiSelect').multiselect({
      includeSelectAllOption: true,
      buttonWidth: '100%',
      maxHeight: 300
  });
  

内容的提问来源于stack exchange，提问作者Eric Pilati