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 相关文章推荐
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
轮播图组件js代码
2016/08/08 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python学生信息管理系统
2018/03/13 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
操行评语大全
2014/04/30 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
毕业生见习报告总结
2014/11/08 职场文书
五一劳动节慰问信
2015/02/14 职场文书
赢在执行观后感
2015/06/16 职场文书
遗失证明范文
2015/06/19 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
python​格式化字符串
2022/04/20 Python