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*@
 

 @*bootstrap*@
 
 

 @*multiple-select*@
 
 

 @*页面js*@
 

（1）原始的初始化

多选站点
   

    
    未排产
    已排产
    已锁定
    在制
    订单提交
    订单删除
    订单报废
    
   

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

（2）设置选中和禁用

disabled Select
   

    
    ......
    
   
$(function () {
 $('#sel_search_orderstatus2').multipleSelect();
})

（3）设置分组和初始值

分组
   

    
    
     未排产
    
    
     已排产
     已锁定
     在制
     订单提交
    
    
     订单删除
     订单报废
    
    
   

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

（4）单选

单选
   

    
    .......
    
   
$(function () {
 $('#sel_search_orderstatus4').multipleSelect({
 placeholder: "请选择",
 single: true
 });
})

（5）筛选

筛选
   

    
    ......
    
   
$(function () {
 $('#sel_search_orderstatus5').multipleSelect({
 placeholder: "请选择",
 filter: true
 });
})

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

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

（1）最原始的初始化

 多选站点
   

    
    未排产
    已排产
    已锁定
    在制
    订单提交
    订单删除
    订单报废
    
   

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

（2）设置选中和禁用

disabled Select
   

    
    未排产
    已排产
    已锁定
    在制
    订单提交
    订单删除
    订单报废
    
   

（3）分组

分组
   

    
    
     未排产
    
    
     已排产
     已锁定
     在制
     订单提交
    
    
     订单删除
     订单报废
    
    
   

$(function () {
 $('#sel_search_orderstatus3').multiselect({
 enableCollapsibleOptGroups: true
 });
});

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

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

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