背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下
1、先引入
<script src="/UploadFiles/2021-04-02/bootstrap-multiselect.min.js">然后全局定义
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实现的下拉框联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 林忆莲.2019-0(2023精装版)【环球】【WAV+CUE】
- Supper.Moment.2016-The.Moment【寰亚】【FLAC分轨】
- 范莉丝.1979-送郎一朵牵牛花(LP版)【大联机构】【WAV+CUE】
- 刘宇.2024-宇宙诗人【哔哟哔哟文化】【FLAC分轨】
- 《全景声白噪音》沉浸式大自然助眠 带你听自然的声音[mp3]
- 纯音入心系列纯音乐《古筝精选 十指弹一赏心曲一心奏出世人心》1CD[MP3][582MB]
- 纯音入心系列纯音乐《古筝与现代音乐的交织》1CD[MP3][96MB]
- 王俪婷.2011-ROMANCE【华研国际】【WAV+CUE】
- 狮子合唱团.2016-LION(引进版)【华纳】【WAV+CUE】
- 范文芳.1996-FNNTASY【HYPE】【WAV+CUE】
- 纯音入心系列纯音乐《韵味古筝曲》1CD[MP3][146.2MB]
- 纯音入心系列纯音乐《古筝系列-传统乐曲》1CD[MP3][974.7MB]
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】