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

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

1、先引入

然后全局定义

 function RegSelect() {
      $('.multiselect').multiselect({
 buttonClass: 'btn btn-white ',
 enableFiltering: true,
 enableHTML: true,
 includeSelectAllOption: true,
 selectAllText: '全选',
 allSelectedText: '全部选中',
 nonSelectedText: '请选择',
 nSelectedText: '个被选中',
 templates: {
   button: '  ',
   ul: '
',
   filter: '
',
   filterClearBtn: '',
   li: '
',
   divider: '
',
   liGroup: '
'
 }
      });
    }

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

2、两个下拉框

 
   维修单位
   
     @Html.DropDownList("RepairOrgUID", ViewBag.OrgList as List, "请选择", new { @class = "form-control multiselect", onchange = "OrgChange(this)", id = "RepairOrg" })
   
 
 
   维修人
   
     @Html.DropDownList("RepairContactUID", ViewBag.ContactList as List, "请选择", new { @class = "form-control multiselect", id = "RepairContact" })
   
 

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实现的下拉框联动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！