前言：今天继续来看看bootstrap的另一个组件：multiselect。记得在项目开始之前，博主项目组几个同事就使用哪些js组件展开过讨论，其中就说到了select组件，由于项目的整体风格使用的bootstrap风格，所以在选用select组件的时候优先考虑和bootstrap结合使用的。其中就找到了两个这种组件，大体样式和功能基本相同，经过一番讨论，项目组决定使用davidstutz的bootstrap-multiselect 组件，今天就来看看这两个组件的用法。
1、第一个组件是写bootstrap table的主人公wenzhixin封装的一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示，我们放在后面。还是给出对应的文档API。
Multiple-Select源码主页：https://github.com/wenzhixin/multiple-select
Multiple-Select文档以及Demo：http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN
2、第二个组件也是在github上面找的——bootstrap-multiselect。这个组件风格和第一个非常相似，文档也挺全面。
bootstrap-multiselect源码主页：https://github.com/davidstutz/bootstrap-multiselect
bootstrap-multiselect文档以及Demo：http://davidstutz.github.io/bootstrap-multiselect/
这个组件需要的浏览器支持如下：
IE 7+
Chrome 8+
Firefox 10+
Safari 3+
Opera 10.6+
还好，一般主流的浏览器都能够支持。
（1）原始的MultiSelect
（2）初始化的Multiple Select
（3）设置选中和禁用
（4）设置分组
（5）设置未选中的初始值：请选择
（6）初始化成单选
（7）设置组件的筛选功能
既然是bootstrap的组件，肯定需要bootstrap的支持。我们来看看需要引用的js
（1）原始的初始化
（2）设置选中和禁用
（3）设置分组和初始值
（4）单选
（5）筛选
（6）更多参数：如果园友们有兴趣，可以看看源码里面的所有参数，虽然没有中文详解，但是根据英文的大概意思就能知道是干什么用的，如果你的multiple select不想要默认的初始值，可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。
下面是博主从文档里面截选出来的一些自认为比较重要的参数说明：（转载至文档http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）
类型: boolean
是否打开下拉列表。
默认值为 <code>false</code>。
类型: string
显示默认的提示信息。
默认值为 <code>''</code>。
是否显示全选复选框。
默认值为 <code>true</code>。
全选复选框的显示内容。
默认值为 <code>Select all</code>。
是否在一行中显示多个选项。
类型: integer
一行中每个选项的宽度。
默认值为 <code>80</code>。
是否只允许你选择一行。
定义下拉列表的位置，只能是 <code>bottom</code> 或者 <code>top</code>。
默认值为 <code>bottom</code>.
是否开启过滤功能。
定义下拉列表的宽度。
默认值为 <code>undefined</code>。 默认与 select 的宽度相同。
下拉列表的最大高度。
默认值为 <code>250</code>。
（7）常用事件（转载至文档http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）
当下拉列表被打开时触发。
当下拉列表被关闭时触发。
点击全选或者调用 “checkall” 方法时触发。
点击全不选或者调用 “uncheckall” 方法时触发。
点击分组时触发。
点击一个复选框时触发
（8）常用方法（转载至文档http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）
获取 Multiple Select 选择内容。
参数: type
选择内容的类型，value 或者 text。
默认值为 <code>value</code>。
设置 Multiple Select 的内容。
参数: values
类型: array
选择框的内容信息。
启用 Multiple Select。
禁用 Multiple Select。在这种模式下，不允许用户操作。
全选所有的复选框。
全不选所有的复选框。
重新加载 Multiple Select。
假如你是通过 AJAX 或者 DOM 来手动添加或者删除 option 选项，可以通过 refresh 方法来重新加载 Multiple Select。
（1）最原始的样子
（2）单选
（3）默认选中和禁用
（4）分组折叠和展开
（5）初始化控件选中和未选中的值
（6）搜索过滤功能
初始化的过程和上面的类似，首先引用文件。
（1）最原始的初始化
（3）分组
其他效果的代码就不一一展示了，代码很简单，看看文档基本没啥问题。
以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭园友们自己的感觉，使用起来都挺简单，功能基本类似。源码下载