欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-30 10:47:28
背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动...

背景:当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实现的下拉框联动,希望对大家有所帮助