基于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 相关文章推荐
超级退弹代码
Jul 07 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
JS无限级导航菜单实现方法
Jan 05 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插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
在Python中编写数据库模块的教程
2015/04/29 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python模块WSGI使用详解
2018/02/02 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
linux面试题参考答案(4)
2013/01/28 面试题
中学教师教育感言
2014/02/21 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
离婚协议书怎么写
2014/09/12 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
Java版 简易五子棋小游戏
2022/05/04 Java/Android