Bootstrap多选下拉框异常排查：底部蓝色组合框干扰问题

你遇到的页面底部出现蓝色异常区域的问题，大概率是因为同时引入了Select2和Bootstrap Multiselect这两个下拉增强插件导致的冲突——它们都针对<select>元素做了样式和行为的重写，同时加载会互相干扰，出现异常UI。

先看你的资源引入问题 #

你的bundles里同时加载了两套下拉增强插件的资源：

• Select2：select2.css + select2.full.js
• Bootstrap Multiselect：bootstrap-multiselect.css + bootstrap-multiselect.js

另外还有重复引入的资源（也可能引发样式异常）：

• 样式中重复引入了bootstrap-multiselect.css（两次）和d3-context-menu.css（两次）

具体解决步骤 #

1. 移除Select2相关资源
   既然你使用的是Bootstrap Multiselect来实现多选下拉，完全不需要同时加载Select2。从你的bundles中删除以下内容：

   • 样式包中的Include("~/Content/css/select2.css")
   • 脚本包中的Include("~/Content/js/plugins/select2/select2.full.js")

2. 清理重复引入的资源
   移除样式包中重复的项：

   • 删掉其中一个Include("~/Content/css/bootstrap-multiselect.css")
   • 删掉其中一个Include("~/Content/css/d3-context-menu.css")

3. 验证效果
   做完以上修改后重新运行项目，底部的蓝色异常区域应该会消失。如果还有问题，可以尝试临时移除其他非核心样式（比如skins/_all-skins.css、Gridmvc.css等），逐步排查是否有其他样式冲突。

附你的原始代码（整理后） #

HTML代码

<form id="multiselectForm" method="post" class="form-horizontal">
  <div class="form-group">
    <label class="col-xs-3 control-label">Browser</label>
    <div class="col-xs-5">
      <select class="form-control" name="browsers" multiple="multiple">
        <option value="chrome">Google Chrome</option>
        <option value="firefox">Firefox</option>
        <option value="ie">IE</option>
        <option value="safari">Safari</option>
        <option value="opera">Opera</option>
        <option value="other">Other</option>
      </select>
    </div>
  </div>
</form>

JS代码

$('#multiselectForm').find('[name="browsers"]')
  .multiselect({
    enableFiltering: true,
    includeSelectAllOption: true,
    // Re-validate the multiselect field when it is changed
    onChange: function(element, checked) {
      $('#multiselectForm').formValidation('revalidateField', 'browsers');
      adjustByScrollHeight();
    },
    onDropdownShown: function(e) {
      adjustByScrollHeight();
    },
    onDropdownHidden: function(e) {
      adjustByHeight();
    }
  })
.end();

资源Bundle配置

bundles.Add(new StyleBundle("~/Bundles/css")
  .Include("~/Content/css/bootstrap.css")
  .Include("~/Content/css/select2.css") // 要移除的项
  .Include("~/Content/css/datepicker3.css")
  .Include("~/Content/css/AdminLTE.css")
  .Include("~/Content/css/skins/_all-skins.css")
  .Include("~/Content/css/Afiniti.css")
  .Include("~/Content/css/configtree.css")
  .Include("~/Content/css/animate.css")
  .Include("~/Content/css/d3-context-menu.css") // 重复项，移除一个
  .Include("~/Content/Gridmvc.css")
  .Include("~/Content/css/font-awesome-anim.css")
  .Include("~/Content/css/bootstrap-multiselect.css") // 重复项，移除一个
  .Include("~/Content/css/Less/bootstrap-multiselect.css")
  .Include("~/Content/css/d3-context-menu.css")); // 重复项，移除这个

bundles.Add(new ScriptBundle("~/Bundles/js")
  .Include("~/Content/js/plugins/jquery/jquery-2.2.4.js")
  .Include("~/Content/js/plugins/jquery/jquery.tmpl.js")
  .Include("~/Content/js/plugins/bootstrap/bootstrap.js")
  .Include("~/Content/js/plugins/fastclick/fastclick.js")
  .Include("~/Content/js/plugins/slimscroll/jquery.slimscroll.js")
  .Include("~/Content/js/plugins/select2/select2.full.js") // 要移除的项
  .Include("~/Content/js/plugins/moment/moment.js")
  .Include("~/Content/js/plugins/datepicker/bootstrap-datepicker.js")
  .Include("~/Content/js/plugins/icheck/icheck.js")
  .Include("~/Content/js/app.js")
  .Include("~/Content/js/d3/d3.js")
  .Include("~/Content/js/d3-context-menu.js")
  .Include("~/Content/js/init.js")
  .Include("~/Content/js/plugins/noty/jquery.noty.packaged.min.js")
  .Include("~/Content/js/plugins/noty/themes/default.js")
  .Include("~/Content/js/plugins/noty/layout/center.js")
  .Include("~/Content/js/plugins/noty/layout/topCenter.js")
  .Include("~/Scripts/Chart.js")
  .Include("~/Scripts/jquery.sparkline.js")
  .Include("~/Scripts/morris/morris.js")
  .Include("~/Scripts/morris/raphael.js")
  .Include("~/Scripts/gridmvc.js")
  .Include("~/Content/js/d3.tip.v0.6.3.js")
  .Include("~/Content/js/bootstrap-multiselect.js")
  .Include("~/Content/js/bootstrap-multiselect-collapsible-groups.js")
);

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