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 相关文章推荐
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
vue自定义filters过滤器
Apr 26 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
vue-i18n实现中英文切换的方法
Jul 06 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
php木马攻击防御之道
2008/03/24 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现命令行通讯录实例教程
2016/08/18 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
银行求职信怎么写
2014/05/26 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB