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

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

1、先引入

<script src="https://www.jb51.net/~/Assets/js/bootstrap-multiselect.min.js"></script> <link href="https://www.jb51.net/~/Assets/css/bootstrap-multiselect.css" />

然后全局定义

function RegSelect() { $('.multiselect').multiselect({ buttonClass: 'btn btn-white ', enableFiltering: true, enableHTML: true, includeSelectAllOption: true, selectAllText: '全选', allSelectedText: '全部选中', nonSelectedText: '请选择', nSelectedText: '个被选中', templates: { button: '<button type="button" data-toggle="dropdown"><span></span> &nbsp;<b></b></button>', ul: '<ul></ul>', filter: '<li><div><span><i></i></span><input type="text"></div></li>', filterClearBtn: '<span><button type="button"><i></i></button></span>', li: '<li><a tabindex="0"><label></label></a></li>', divider: '<li></li>', liGroup: '<li><label></label></li>' } }); }

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

2、两个下拉框

<div> <label for="RepairOrg">维修单位</label> <div> @Html.DropDownList("RepairOrgUID", ViewBag.OrgList as List<SelectListItem>, "请选择", new { @class = "form-control multiselect", onchange = "OrgChange(this)", id = "RepairOrg" }) </div> </div> <div> <label for="RepairContact">维修人</label> <div> @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实现的下拉框联动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: