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截取固定长度的中英文字符的简单实例
Nov 22 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
Vue 实例事件简单示例
Sep 19 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
JavaScript实现手风琴效果
Feb 18 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反弹shell实现代码
2009/04/22 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
利用javascript查看html源文件
2006/11/08 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
chosen实现省市区三级联动
2018/08/16 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
自动一体化专业求职信
2014/03/15 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python