JS组件中bootstrap multiselect两大组件较量


Posted in Javascript onJanuary 26, 2016

两个这种组件,大体样式和功能基本相同,本文就来带领大家看看这两个组件的用法。

一、组件说明以及API
1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。

2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似,文档也挺全面。

二、Multiple-select组件
1、组件说明
这个组件需要的浏览器支持如下:

  • IE 7+
  • Chrome 8+
  • Firefox 10+
  • Safari 3+
  • Opera 10.6+

还好,一般主流的浏览器都能够支持。

2、效果预览
 (1)原始的MultiSelect

JS组件中bootstrap multiselect两大组件较量

(2)初始化的Multiple Select

JS组件中bootstrap multiselect两大组件较量

JS组件中bootstrap multiselect两大组件较量

 JS组件中bootstrap multiselect两大组件较量

(3)设置选中和禁用

JS组件中bootstrap multiselect两大组件较量

(4)设置分组

JS组件中bootstrap multiselect两大组件较量

(5)设置未选中的初始值:请选择

JS组件中bootstrap multiselect两大组件较量

(6)初始化成单选

JS组件中bootstrap multiselect两大组件较量

(7)设置组件的筛选功能

JS组件中bootstrap multiselect两大组件较量

JS组件中bootstrap multiselect两大组件较量

3、代码示例
既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js

@*Jquery*@
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>

 @*bootstrap*@
 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 @*multiple-select*@
 <script src="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script>
 <link href="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" rel="stylesheet" />

 @*页面js*@
 <script src="~/Scripts/Home/Index_wenzhixin.js"></script>

(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:150px" 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>
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus').multipleSelect();
})

(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">
    ......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus2').multipleSelect();
})

(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">已锁定</option>
     <option value="25">在制</option>
     <option value="20">订单提交</option>
    </optgroup>
    <optgroup label="异常">
     <option value="30">订单删除</option>
     <option value="50">订单报废</option>
    </optgroup>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus3').multipleSelect({
 placeholder: "请选择"
 });
})

(4)单选

<label class="control-label col-xs-1" for="sel_search_orderstatus4">单选</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple">
    .......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus4').multipleSelect({
 placeholder: "请选择",
 single: true
 });
})

(5)筛选

<label class="control-label col-xs-1" for="sel_search_orderstatus5">筛选</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
    ......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus5').multipleSelect({
 placeholder: "请选择",
 filter: true
 });
})

(6)如果你的multiple select不想要默认的初始值,可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

JS组件中bootstrap multiselect两大组件较量

三、Bootstrap-multiselect组件
1、代码示例
初始化的过程和上面的类似,首先引用文件。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 <script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script>
 <link href="~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel="stylesheet" />

 <script src="~/Scripts/Home/Index_davidstutz.js"></script>

(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:150px" 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>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus').multiselect();
});

(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>

(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({
 enableCollapsibleOptGroups: true
 });
});

其他效果的代码就不一一展示了,代码很简单,看看文档基本没啥问题。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭自己的感觉,使用起来都挺简单,功能基本类似,希望这篇文章对大家的学习有所帮助。

Javascript 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
Vue和React有哪些区别
Sep 12 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
JS组件Form表单验证神器BootstrapValidator
Jan 26 #Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 #Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 #Javascript
javascript实现2016新年版日历
Jan 25 #Javascript
基于javascript实现图片左右切换效果
Jan 25 #Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 #Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
js实现网页收藏功能
2015/12/17 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
python实现FTP服务器服务的方法
2017/04/11 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python3安装speech语音模块的方法
2018/12/24 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
水务局局长岗位职责
2013/11/28 职场文书
政府门卫岗位职责
2014/04/29 职场文书
专家推荐信模板
2014/05/09 职场文书
行政处罚听证告知书
2015/07/01 职场文书
Vue操作Storage本地化存储
2022/04/29 Vue.js