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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
微信小程序版本自动更新的方法
Jun 14 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 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
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
javascript基础知识讲解
2017/01/11 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
django数据库自动重连的方法实例
2019/07/21 Python
python字典的遍历3种方法详解
2019/08/10 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python GUI模拟实现计算器
2020/06/22 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
小学生家长寄语
2014/04/02 职场文书
无偿献血倡议书
2014/04/14 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
vue组件vue-esign实现电子签名
2022/04/21 Vue.js