基于bootstrap-multiselect.js的下拉框联动
背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下
1、先引入 <script src="~/Assets/js/bootstrap-multiselect.min.js"></script>
<link href="~/Assets/css/bootstrap-multiselect.css" 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\'); }); }