基于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实现的下拉框联动,希望对大家有所帮助
上一篇: Oracle实现行列转换的方法分析
推荐阅读
-
基于BootStrap multiselect.js实现的下拉框联动效果
-
Bootstrap实现基于carousel.js框架的轮播图效果
-
基于Vue2实现简易的省市区县三级联动组件效果
-
Bootstrap实现基于carousel.js框架的轮播图效果
-
vue实现下拉框二级联动效果的实例代码
-
基于Vue2实现简易的省市区县三级联动组件效果
-
基于Mui中picker选择器实现省市县三级联动效果中setData方法传值的问题解决办法
-
基于BootStrap multiselect.js实现的下拉框联动效果
-
js实现的下拉框二级联动效果_javascript技巧
-
vue实现下拉框二级联动效果的实例代码