免费抠图软件_图片加文字_在线制作拼图的网站_图片处理神器_在线抠图 免费
当前位置:建站首页 > 新闻资讯 > 网站设计 >

小程序如何做推广_基于BootStrap multiselect.js完成的

发表日期:2021-01-11 15:48文章编辑:jianzhan浏览次数: 标签:    

基于BootStrap multiselect.js实现的下拉框联动效果       当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" data-toggle="dropdown" span /span nbsp; b /b /button ',
 ul: ' ul /ul ',
 filter: ' li div span i /i /span input type="text" /div /li ',
 filterClearBtn: ' span button type="button" i /i /button /span ',
 li: ' li a tabindex="0" label /label /a /li ',
 divider: ' li /li ',
 liGroup: ' li label /label /li '
 }

只需要在页面加载时RegSelect();(只能调用一次,不然会出现问题)就可以了

2、两个下拉框

 div 
 label for="RepairOrg" 维修单位 /label 
 div 
 @Html.DropDownList("RepairOrgUID", ViewBag.OrgList as List SelectListItem , "请选择", new { @class = "form-control multiselect", onchange = "OrgChange(this)", id = "RepairOrg" })
 /div 
 /div 
 div 
 label for="RepairContact" 维修人 /label 
 div 
 @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实现的下拉框联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


相关新闻