Multi select dropdown showing additional dropdown

|▌冷眼眸甩不掉的悲伤 提交于 2021-02-10 06:29:06

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!