基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果

這篇文章主要介紹基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

背景：當(dāng)option特別多時(shí)，一般的下拉框選擇起來(lái)就有點(diǎn)力不從心了，所以使用multiselect是個(gè)很好的選擇，可以通過(guò)輸入文字來(lái)選擇選項(xiàng)很方

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: '請(qǐng)選擇',
        nSelectedText: '個(gè)被選中',
        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>'
        }
      });
    }

只需要在頁(yè)面加載時(shí)RegSelect();（只能調(diào)用一次，不然會(huì)出現(xiàn)問(wèn)題）就可以了

2、兩個(gè)下拉框

 <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>, "請(qǐng)選擇", 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>, "請(qǐng)選擇", 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: "請(qǐng)選擇",
          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實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！