基于BootStrap multiselect.js实现的下拉框联动效果

背景：当option特别多时，一般的下拉框选择起来就有点力不从心了，所以使用multiselect是个很好的选择，可以通过输入文字来选择选项很方便，但是有一个需要下拉框联动，网上找了半天才找到解决方法，在此分享一下

1、先引入

<script src="~/assets/js/bootstrap-multiselect.min.js"></script>
  <link href="~/assets/css/bootstrap-multiselect.css" rel="external nofollow" rel="stylesheet" />

然后全局定义

 function regselect() {
      $('.multiselect').multiselect({
        buttonclass: 'btn btn-white ',
        enablefiltering: true,
        enablehtml: true,
        includeselectalloption: true,
        selectalltext: '全选',
        allselectedtext: '全部选中',
        nonselectedtext: '请选择',
        nselectedtext: '个被选中',
        templates: {
          button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span>  <b class="fa fa-caret-down"></b></button>',
          ul: '<ul class="multiselect-container dropdown-menu"></ul>',
          filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
          filterclearbtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
          li: '<li><a tabindex="0"><label></label></a></li>',
          divider: '<li class="multiselect-item divider"></li>',
          ligroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
        }
      });
    }

只需要在页面加载时regselect();（只能调用一次，不然会出现问题）就可以了

2、两个下拉框

 <div class="form-group">
          <label for="repairorg" class="col-sm-3 control-label">维修单位</label>
          <div class="col-sm-9">
            @html.dropdownlist("repairorguid", viewbag.orglist as list<selectlistitem>, "请选择", new { @class = "form-control multiselect", onchange = "orgchange(this)", id = "repairorg" })
          </div>
        </div>
        <div class="form-group">
          <label for="repaircontact" class="col-sm-3 control-label">维修人</label>
          <div class="col-sm-9">
            @html.dropdownlist("repaircontactuid", viewbag.contactlist as list<selectlistitem>, "请选择", new { @class = "form-control multiselect", id = "repaircontact" })
          </div>
        </div>

3、js代码

function orgchange(obj, patientid) {
      var repairorg = $(obj).val();
      $.post("/terminalmanage/getcontactbyorg", { repairorg: repairorg }, function (data) {     
        var newcitys = new array();
        var obj = new object();
        obj = {
          label: "请选择",
          value: ""
        };
        newcitys.push(obj);
        for (var i = 0; i < data.length; i++) {
          obj = {
            label: data[i].text,
            value: data[i].value
          };
          newcitys.push(obj);
        }
        $("#repaircontact").multiselect('dataprovider', newcitys);
        $('#repaircontact').multiselect('refresh');
      });
    }

总结

以上所述是小编给大家介绍的基于bootstrap multiselect.js实现的下拉框联动，希望对大家有所帮助