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将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
基于vue的video播放器的实现示例
Feb 19 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
JQuery小知识
2010/10/15 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
javascript拖拽效果延伸学习
2016/04/04 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python while 循环使用的简单实例
2016/06/08 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python3.5运算符操作实例详解
2019/04/25 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
SQL Server面试题
2013/04/04 面试题
市场营销专业自荐书
2014/06/10 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL
apache ftpserver搭建ftp服务器
2022/05/20 Servers