Bootstrap-multiselect.js-based drop-down box linkage

Background: When the option is particularly long, the general drop-down box is a bit out of the way, so using MultiSelect is a good choice, you can enter text to choose the option is very convenient, but there is a need to pull down the box linkage, online find a half-day to find a solution, here to share

1, first introduced <script src= "~/assets/js/bootstrap-multiselect.min.js" ></script>

<link href= "~/assets/css/bootstrap-multiselect.css" rel= "stylesheet"/>

And then globally define

function Regselect () {$ ('. MultiSelect'). MultiSelect ({buttonclass:'btn Btn-white', enablefiltering:true, enablehtml:true, Includeselectalloption:true, Selectalltext:'Select All', Allselectedtext:'Select All', Nonselectedtext:'Please select', Nselectedtext:'One is selected', Templates: {button:'<button type= "button" class= "MultiSelect dropdown-toggle" data-toggle= "dropdown" ><span class= " Multiselect-selected-text "></span> &nbsp;<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>'                }            }); }

You only need to Regselect () when the page loads (only once, or there will be a problem).

2, two drop-down boxes

 <Divclass= "Form-group">                    <label for= "repairorg"class= "Col-sm-3 Control-label">Repair Unit</label>                    <Divclass= "Col-sm-9">@Html. DropDownList ("Repairorguid", viewbag.orglist as List<SelectListItem>, "Please select", new {@class = "Form-control multiselect", onchange = "Orgchange (this)", id = "repairorg"}) </Div>                </Div>                <Divclass= "Form-group">                    <label for= "Repaircontact"class= "Col-sm-3 Control-label">Maintenance person</label>                    <Divclass= "Col-sm-9">@Html. DropDownList ("Repaircontactuid", viewbag.contactlist as List<SelectListItem>, "Please select", new {@class = "Form-control multiselect", id = "Repaircontact"})</Div>                </Div>

3. JS Code

 functionorgchange (obj, patientid) {varrepairorg =$ (obj). val (); $.post ("/terminalmanage/getcontactbyorg", {repairorg:repairorg},function(data) {                varNewcitys =NewArray (); varobj =NewObject (); Obj={label:"Please select", Value:""                };                Newcitys.push (obj);  for(vari = 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-based drop-down box linkage