重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍基于BootStrap multiselect.js实现的下拉框联动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司联系电话:18980820575,为您提供成都网站建设网页设计及定制高端网站建设服务,创新互联公司网页制作领域十载,包括成都木制凉亭等多个方面拥有丰富的网站运维经验,选择创新互联公司,为网站锦上添花。
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。
背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方
1、先引入
然后全局定义
function RegSelect() { $('.multiselect').multiselect({ buttonClass: 'btn btn-white ', enableFiltering: true, enableHTML: true, includeSelectAllOption: true, selectAllText: '全选', allSelectedText: '全部选中', nonSelectedText: '请选择', nSelectedText: '个被选中', templates: { button: '', ul: '
只需要在页面加载时RegSelect();(只能调用一次,不然会出现问题)就可以了
2、两个下拉框
@Html.DropDownList("RepairOrgUID", ViewBag.OrgList as List, "请选择", new { @class = "form-control multiselect", onchange = "OrgChange(this)", id = "RepairOrg" }) @Html.DropDownList("RepairContactUID", ViewBag.ContactList as List, "请选择", new { @class = "form-control multiselect", id = "RepairContact" })
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实现的下拉框联动效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!