• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Bootstrap 下拉多选框插件Bootstrap Multiselect

Bootstrap 下拉多选框插件Bootstrap Multiselect

作者:masterkgw 字体:[增加 减小] 来源:互联网 时间:2017-05-11

masterkgw通过本文主要向大家介绍了bootstrap下拉选择,bootstrap 下拉多选,bootstrap下拉树,bootstrap下拉,bootstrap下拉框等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

引入文件:

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
</div>
<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>
</div>

使用

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>
</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: '全选' //全选文本
      });
</div>

如希望修改其宽度,参考:http://m.blog.csdn.net/article/details?id=50971672

根据option的id设置某个选项为被选择。

$(‘#selectId').multiselect(‘select',optionId);
</div>

以上所述是小编给大家介绍的Bootstrap 下拉多选框插件Bootstrap Multiselect,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Bootstrap下拉菜单样式
  • Bootstrap 下拉多选框插件Bootstrap Multiselect
  • bootstrap下拉菜单使用方法解析

相关文章

  • 2017-05-11微信小程序 欢迎页面的制作(源码下载)
  • 2017-05-11Bootstrap select下拉联动(jQuery cxselect)
  • 2017-05-11node.js(express)中使用Jcrop进行图片剪切上传功能
  • 2017-05-11简单谈谈Javascript函数中的arguments
  • 2017-05-11JavaScript数组复制详解
  • 2017-05-11Javascript中八种遍历方法的执行速度深度对比
  • 2017-05-11微信小程序 二维码canvas绘制实例详解
  • 2017-05-11字太多用...代替的方法(两种)
  • 2017-05-11js数字计算 误差问题的快速解决方法
  • 2017-05-11JavaScript实现网页头部进度条刷新

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 简单实现jQuery级联菜单
    • js实现弹窗暗层效果
    • js仿百度音乐全选操作
    • JS 实现计算器详解及实例代码(一)
    • js实现选项卡内容切换以及折叠和展开效果【推荐】
    • ES6中Proxy代理用法实例浅析
    • jqGrid翻页时数据选中丢失问题的解决办法
    • JS html时钟制作代码分享
    • Bootstrap的popover(弹出框)在append后弹不出(失效)
    • html5 canvas 详细使用教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有