menu
more_vert
基于bootstrap-multiselect.js的下拉框联动

作者:dayu

然后全局定义

  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> &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>
                }


            });
        }

只需要在页面加载时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的下拉框联动

原文地址:http://www.cnblogs.com/stubborn-donkey/p/7248618.html