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

1、先引入

<script src="/UploadFiles/2021-04-02/bootstrap-multiselect.min.js">

然后全局定义

 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实现的下拉框联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
bootstrap,multiselect,bootstrap,下拉框联动

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。