首页 > 开发 > JS > 正文

基于BootStrap multiselect.js实现的下拉框联动效果

2024-05-06 16:38:43
字体:
来源:转载
供稿:网友

背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下

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: '请选择',        nSelectedText: '个被选中',        templates: {          button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span>  <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实现的下拉框联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持!


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表