背景：當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實現的下拉框聯動，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
