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 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 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
短波的认识
2021/03/01 无线电
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
详解Django通用视图中的函数包装
2015/07/21 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
如何在pycharm中安装第三方包
2020/10/27 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
linux下进程间通信的方式
2014/12/23 面试题
护理专科毕业推荐信
2013/11/10 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
个人委托书格式
2014/04/04 职场文书
股票投资建议书
2014/05/19 职场文书
关于环保的标语
2014/06/13 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
植树节新闻稿
2015/07/17 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python