ASP.Net Core Razor Page中Bootstrap Multiselect点击无下拉问题排查

我帮你排查了下你的代码和依赖配置，发现几个很可能导致下拉列表弹不出来的原因，你可以逐个试试：

1. 旧CDN资源失效 #

你用的rawgit.com的CDN已经停止服务了，虽然浏览器没报错，但很可能bootstrap-multiselect的CSS/JS根本没加载成功，导致插件功能缺失。建议换成稳定的jsDelivr CDN：

• 替换CSS链接：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/css/bootstrap-multiselect.min.css">
  

• 替换JS链接：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/js/bootstrap-multiselect.min.js"></script>
  

2. 未等待DOM完全加载就初始化插件 #

你的初始化代码直接写在全局作用域里，可能页面元素还没渲染完成就执行了，导致插件没能正确绑定下拉事件。把初始化代码放到$(document).ready()里，确保DOM加载完成后再执行：

$(document).ready(function() {
  $('#example-getting-started').multiselect();
});

3. jQuery版本过低 #

你用的jQuery 1.8.3太老了，虽然和Bootstrap 3.0.3理论兼容，但bootstrap-multiselect的新版本可能对jQuery有更高要求。建议升级到兼容Bootstrap 3的稳定版本，比如jQuery 1.12.4：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

4. 检查下拉容器是否被遮挡 #

有时候下拉列表已经渲染了，但被其他页面元素挡住了。点击按钮后，打开浏览器开发者工具，搜索.multiselect-container元素，看看它是否存在。如果被遮挡，给它加个更高的z-index：

.multiselect-container {
  z-index: 9999 !important;
}

修改后的完整代码示例 #

<select id="example-getting-started" multiple="multiple">
  <option value="cheese">Cheese</option>
  <option value="tomatoes">Tomatoes</option>
  <option value="mozzarella">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-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/css/bootstrap-multiselect.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/js/bootstrap-multiselect.min.js"></script>

<!-- 安全的初始化方式 -->
<script>
$(document).ready(function() {
  $('#example-getting-started').multiselect();
});
</script>

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