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

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

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

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

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

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

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

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

(2)初始化的Multiple Select

(3)设置选中和禁用

(4)设置分组

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

(6)初始化成单选

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

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不想要默认的初始值,可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

三、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实战教程

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

(0)

相关推荐

  • bootstrap multiselect下拉列表功能

    bootstrap-multiselect基于原生态的下拉列表添加更多的功能及更好的视觉效果! 1.源码地址 https://github.com/davidstutz/bootstrap-multiselect 2.效果展示 3.代码示例 引入的js和css <script src="js/jquery-1.11.3.js"></script> <script src="js/bootstrap.js"></script&

  • Bootstrap Multiselect 常用组件实现代码

    实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html 如果你英文好一点,里面有详细的介绍,多选框的设置,多选框获取值/文本,选项分组,各种各样丰富的表现方式和获取. 结合实际项目,加深技术理解,同时也方便自己后续项目中的使用. 多选框和单选框相同,实际项目中前端不可能将里面的选项很直

  • BootStrap实现鼠标悬停下拉列表功能

    BootStrap实现鼠标悬停下拉列表功能,具体内容详情如下所示: //最简单的鼠标悬停,实现下拉功能,应用bootstrap框架的知识,不会bootstrap自己百度怎么使用 <html><head> <meta charset="UTF-8"> <!-- 引入 Bootstrap --> <link href="../css/bootstrap.min.css" rel="external nofo

  • 基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

    在上篇基于BootStrap Metronic开发框架经验小结[二]列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://

  • BootStrap中关于Select下拉框选择触发事件及扩展

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

  • bootstrap multiselect 多选功能实现方法

    官方教程 http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html 使用方法: 第一步引用样式以及相关JS <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" type="text/css"/> <script

  • 基于BootStrap multiselect.js实现的下拉框联动效果

    背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下 1.先引入 <script src="~/Assets/js/bootstrap-multiselect.min.js"></script> <link href="~/Assets/css/bootstrap-multiselect

  • Bootstrap每天必学之下拉菜单

    一.下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ☑ LESS版本:对应的源码文件为 dropdowns.less ☑ Sass版本:对应的源码文件为 _dropdowns.sass ☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本

  • bootstrap下拉列表与输入框组结合的样式调整

    输入框组默认是div.input-group 已知可在input表单元素前后加入两类元素[分别是文本和按钮]如下所示: div.input-group-addon{文字或符号} input.form-control div.input-group-btn 其中按钮还可嵌套下拉菜单(包括分裂式下拉菜单) 一.基本用法如下: <div class="input-group"> <span class="input-group-addon">@&l

  • Bootstrap 下拉多选框插件Bootstrap Multiselect

    引入文件: <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> <script type="text/ja

随机推荐