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压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
js arguments对象应用介绍
Nov 28 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
Python导入模块时遇到的错误分析
2017/08/30 Python
Python数据结构之图的应用示例
2018/05/11 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
在python3中实现更新界面
2020/02/21 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
使用C#编写创建一个线程的代码
2013/01/22 面试题
住房公积金接收函
2014/01/09 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
个人承诺书格式范文
2015/04/29 职场文书
2015年暑假生活总结
2015/07/13 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书