基于BootStrap multiselect.js实现的下拉框联动效果


Posted in Javascript onJuly 28, 2017

背景:当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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
基于JS实现移动端左滑删除功能
Jul 28 #Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 #Javascript
webpack实现热更新(实施同步刷新)
Jul 28 #Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 #Javascript
解决React Native端口号修改的方法
Jul 28 #Javascript
vue+vux实现移动端文件上传样式
Jul 28 #Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP 实现缩略图
2021/03/09 PHP
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
angular4自定义组件详解
2017/09/28 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
在Django的视图中使用form对象的方法
2015/07/18 Python
利用python获取Ping结果示例代码
2017/07/06 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
浅析Python中字符串的intern机制
2020/10/03 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
为什么使用接口?
2014/08/13 面试题
Ado与Ado.net的相同与不同
2014/12/08 面试题
入党思想汇报
2014/01/05 职场文书
证婚人经典证婚词
2014/01/09 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
婚庆答谢词
2015/01/04 职场文书
高中班长竞选稿
2015/11/20 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS