bootstrap multiselect下拉列表功能


Posted in Javascript onAugust 22, 2017

bootstrap-multiselect基于原生态的下拉列表添加更多的功能及更好的视觉效果!

1、源码地址

https://github.com/davidstutz/bootstrap-multiselect

2、效果展示

bootstrap multiselect下拉列表功能bootstrap multiselect下拉列表功能bootstrap multiselect下拉列表功能bootstrap multiselect下拉列表功能bootstrap multiselect下拉列表功能

3、代码示例

引入的js和css

<script src="js/jquery-1.11.3.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <link href="css/bootstrap.css" rel="external nofollow" rel="stylesheet" /> 
    <script src="js/bootstrap-multiselect.js"></script> 
    <link href="css/bootstrap-multiselect.css" rel="external nofollow" rel="stylesheet" /> 
    <script src="~/Scripts/Home/Index_davidstutz.js"></script>

实现代码

3.1、多选站点

<label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label> 
  <div class="col-xs-2" style="margin-top:7px;"> 
    <select id="sel_search_orderstatus" style="width:350px;"  multiple="multiple"> 
      <option value="0">未排产</option> 
      <option value="5">已排产</option> 
      <option value="10">已锁定</option> 
      <option value="25">在制</option> 
      <option value="20">订单提交</option> 
      <option value="30">订单删除</option> 
      <option value="50">订单报废</option> 
      <option value="50">订单报废</option> 
      <option value="50">订单报废</option> 
      <option value="50">订单报废</option> 
      <option value="50">订单报废</option> 
       
    </select> 
  </div>
$(function () { 
      $('#sel_search_orderstatus').multiselect({ 
        includeSelectAllOption: true}); 
      });

3.2、禁止和默认选中

<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label> 
  <div class="col-xs-2" style="margin-top:7px;"> 
   <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple"> 
      <option value="0">未排产</option> 
      <option value="5" selected="selected">已排产</option> 
      <option value="10" selected="selected">已锁定</option> 
      <option value="25" disabled="disabled">在制</option> 
      <option value="20" disabled="disabled">订单提交</option> 
      <option value="30" disabled="disabled" selected="selected">订单删除</option> 
      <option value="50">订单报废</option> 
    </select> 
  </div>
$(function () { 
      $('#sel_search_orderstatus2').multiselect(); 
      });

3.3、分组

<label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label> 
            <div class="col-xs-2" style="margin-top:7px;"> 
              <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple"> 
                <optgroup label="未上线" > 
                  <option value="0">未排产</option> 
                </optgroup> 
                <optgroup label="已上线"> 
                  <option value="5">已排产</option> 
                  <option value="10" selected="selected">已锁定</option> 
                  <option value="25" disabled="disabled">在制</option> 
                  <option value="20">订单提交</option> 
                </optgroup> 
                <optgroup label="异常"> 
                  <option value="30">订单删除</option> 
                  <option value="50">订单报废</option> 
                </optgroup> 
              </select> 
            </div>
$(function () { 
       $('#sel_search_orderstatus3').multiselect( 
        ); 
      });

3.4、单选项

<label class="control-label col-xs-1" for="sel_search_orderstatus3">单选</label> 
    <select id="example-single"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
      <option value="4">Option 4</option> 
      <option value="5">Option 5</option> 
      <option value="6">Option 6</option> 
    </select>
$('#example-single').multiselect();

3.5、搜索

<label class="control-label col-xs-1" for="sel_search_orderstatus3">搜索</label> 
    <select id="example-getting-started" multiple="multiple"> 
      <option value="cheese">Cheese</option> 
      <option value="tomatoes">Tomatoes</option> 
      <option value="mozarella">Mozzarella</option> 
      <option value="mushrooms">Mushrooms</option> 
      <option value="pepperoni">Pepperoni</option> 
      <option value="onions">Onions</option> 
    </select>
$(function () { 
       $('#example-getting-started').multiselect({ 
          includeSelectAllOption: true, 
          enableFiltering: true 
        }); 
 });

默认无滚动条,请在bootstrap-multiselect.css中添加即可。

具体属性demo,源码解释的非常清楚,我就不列出来了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript闭包实例讲解
Apr 22 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 #Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 #Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 #Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 #Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
React学习笔记之列表渲染示例详解
Aug 22 #Javascript
bootstrap switch开关组件使用方法详解
Aug 22 #Javascript
You might like
PHP 简单数组排序实现代码
2009/08/05 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
ORACLE十问
2015/04/20 面试题
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python