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

这篇文章主要介绍基于BootStrap multiselect.js实现的下拉框联动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。

背景:当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> &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>

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。