两个这种组件，大体样式和功能基本相同，本文就来带领大家看看这两个组件的用法。
一、组件说明以及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 });});
其他效果的代码就不一一展示了，代码很简单，看看文档基本没啥问题。
以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭自己的感觉，使用起来都挺简单，功能基本类似，希望这篇文章对大家的学习有所帮助。