Bootstrap 下拉多选框插件Bootstrap Multiselect


Posted in Javascript onJanuary 22, 2017

引入文件:

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

使用

jsp页面

<div class="form-group">
              <label class="col-sm-4 control-label"><i class="required">* </i>所属部门:</label>
              <div class="col-sm-6">
                <div class="myOwnDdl">
                <select name="expendProject" id="user_dept" class="form-control">
                  <option value="" selected="selected">请选择部门</option>
                </select>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-4 control-label"><i class="required">* </i>所属角色:</label>
              <div class="col-sm-6">
                <div class="myOwnDdl">
                  <select name="expendProject" id="user_role" class="form-control" multiple="multiple">
                    <c:forEach var="var" items="${requestScope.roles }">
                      <option value="${var.id}">${var.roleName}</option>
                    </c:forEach>
                  </select>
                </div>
              </div>
            </div>

js:

 $("#user_role").multiselect({  //分别为控制下拉容器最大高度、最多允许具体展示选中项数(其余以数字形式展示)、隔行换色控制、全选、支持检索。           

maxHeight:300,
        numberDisplayed:3,
        optionClass: function(element) {
          var value = $(element).parent().find($(element)).index();
          if (value%2 == 0) {
            return 'even';
          }
          else {
            return 'odd';
          }
        },
        includeSelectAllOption: true,
        enableFiltering: true,
        selectAllJustVisible: true,
        nonSelectedText: '请选择角色', //默认展示文本
        selectAllText: '全选' //全选文本
      });

如希望修改其宽度,参考:http://m.blog.csdn.net/article/details?id=50971672

根据option的id设置某个选项为被选择。

$(‘#selectId').multiselect(‘select',optionId);

以上所述是小编给大家介绍的Bootstrap 下拉多选框插件Bootstrap Multiselect,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 遍历json数组的实现代码
Sep 22 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
详解Vue的列表渲染
Nov 20 Vue.js
JavaScript 详解预编译原理
Jan 22 #Javascript
JavaScript中匿名函数的递归调用
Jan 22 #Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 #Javascript
loading动画特效小结
Jan 22 #Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 #Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 #Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 #Javascript
You might like
PHP设计聊天室步步通
2006/10/09 PHP
php 注释规范
2012/03/29 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP速成大法
2015/01/30 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
js中replace的用法总结
2013/12/27 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
微信小程序签到功能
2018/10/31 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python学生管理系统代码实现
2020/04/05 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
python tkinter实现连连看游戏
2020/11/16 Python
Python 多进程原理及实现
2020/12/21 Python
python线程优先级队列知识点总结
2021/02/28 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
大专自我鉴定范文
2013/10/23 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL