问题
I am creating a multi-select dropdown using bootstrap this is the 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>
and this is the 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();
But the required out is as follows:
I dont know why the box at the bottom with blue combo boxes appears, I want to remove that.
These the files I have included in my project, need to identify which one of them is interfering with multiselect dropdown :
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"));
//.Include("~/Content/css/dataTables.bootstrap.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/date/date.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")
// FIXME: Adding this so the widgets may be initialized
.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")
);
bundles.Add(new ScriptBundle("~/Bundles/jquery")
.Include("~/Content/js/plugins/jquery/jquery-2.2.4.js")
.Include("~/Scripts/Chart.js")
);
bundles.Add(new StyleBundle("~/Bundles/logincss")
.Include("~/Content/css/AdminLTE.css")
.Include("~/Content/css/Afiniti.css")
);
bundles.Add(new ScriptBundle("~/Bundles/loginjs")
.Include("~/Content/js/plugins/jquery/jquery-2.2.4.js")
.Include("~/Content/js/plugins/bootstrap/bootstrap.js")
.Include("~/Content/js/plugins/icheck/icheck.js")
.Include("~/Scripts/jquery.validate.js")
.Include("~/Scripts/jquery.validate.js")
.Include("~/Scripts/jquery.validate.unobtrusive.js"));
来源:https://stackoverflow.com/questions/48263315/multi-select-dropdown-showing-additional-dropdown