Bootstrap-multiselect.js-based drop-down box linkage, bootstrap drop-down box Linkage

Bootstrap-multiselect.js-based drop-down box linkage, bootstrap drop-down box Linkage

Background: when there are many options, the selection of the drop-down box is usually a little inadequate. Therefore, it is a good choice to use multiselect. You can easily select the option by entering text, however, there is a problem that requires a drop-down box linkage. The solution can be found online for half a day. Here, I will share it with you.

1. First introduce <script src = "~ /Assets/js/bootstrap-multiselect.min.js "> </script>

<Link href = "~ /Assets/css/bootstrap-multiselect.css "rel =" stylesheet "/>

Then global definition

Function RegSelect () {$ ('. multiselect '). multiselect ({buttonClass: 'btn btn-white', enableFiltering: true, enableHTML: true, includeSelectAllOption: true, selectAllText: 'selectedtext', allSelectedText: 'selectedtext', nonSelectedText: 'select ', nSelectedText: 'selected', templates: {button: '<button type = "button" class = "multiselect dropdown-toggle" data-toggle = "dropdown"> <span class = "multiselect-selected-text"> </span> & nbsp; <B class = "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-default btn-white btn-gray multiselect-clear-filter" type = "button"> <I class = "fa-times-circle red2"> </I> </button> </span> ', li: '<li> <a tabindex = "0"> <label> </a> </li>', divider: '<li class = "multiselect-item divider"> </li>', liGroup: '<li class = "multiselect-item multiselect-group"> <label> </li> '}});}

You only need to perform RegSelect () when loading the page (only one call is allowed, otherwise the problem will occur ).

2. Two drop-down lists

<Div class = "form-group"> <label for = "re1_rorg" class = "col-sm-3 control-label"> repair unit </label> <div class = "col-sm-9"> @ Html. dropDownList ("recyclrorguid", ViewBag. orgList as List <SelectListItem>, "select", new {@ class = "form-control multiselect", onchange = "OrgChange (this)", id = "recyclrorg "}) </div> <div class = "form-group"> <label for = "RepairContact" class = "col-sm-3 control-label"> maintainer </label> <div class = "col-sm-9"> @ Html. dropDownList ("RepairContactUID", ViewBag. contactList as List <SelectListItem>, "select", new {@ class = "form-control multiselect", id = "RepairContact"}) </div>

3. js Code

Function OrgChange (obj, patientID) {var retries rorg = $ (obj ). val (); $. post ("/TerminalManage/GetContactByOrg", {recyclrorg: recyclrorg}, function (data) {var newCitys = new Array (); var obj = new Object (); obj = {label: "select", 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 ');});}