基于BootStrap multiselect.js实现的下拉框联动效果
更新时间：2017年07月28日 11:39:15 作者：小倔驴
当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实现的下拉框联动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了JavaScript仿百度切换皮肤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了微信小程序实现日历签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了javascript实现了照片拖拽点击置顶的照片墙代码，效果非常不错，这里推荐给大家，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要介绍了JavaScript 详解预编译原理的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了JavaScript中常见的数据格式化方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下2023-12-12
这篇文章主要为大家详细介绍了JavaScript编写开发动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07![js中[]、{}、()区别示例浅析](//img.jbzj.com/images/xgimg/bcimg6.png)
很多人都知道在js中[]表示的是数组对象,{}表示的是对象,但是这两者的区别却说不出来,下面这篇文章主要给大家介绍了关于js中[]、{}、()区别的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了javascript实现的多个层切换效果通用函数,涉及javascript针对页面元素样式的遍历与操作技巧,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了解决js中的setInterval清空定时器不管用问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
在 JavaScript 中,new 关键字不仅是面向对象编程的关键要素,还是创建实例的重要手段,本文将深入探讨 new 关键字的使用,理解它在对象创建和构造函数调用中的作用,需要的朋友可以参考下2023-11-11
![js中[]、{}、()区别示例浅析](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论