基於bootstrap-multiselect.js的下拉框聯動

標籤：selected   維修   styles   ogg   href   amp   link   網上   arc   

背景：當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> &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的下拉框聯動