一、组件说明以及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="https://www.jb51.net/~/Scripts/jquery-1.10.2.min.js"></script> @*bootstrap*@ <script src="https://www.jb51.net/~/Content/bootstrap/js/bootstrap.min.js"></script> <link href="https://www.jb51.net/~/Content/bootstrap/css/bootstrap.min.css" /> @*multiple-select*@ <script src="https://www.jb51.net/~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script> <link href="https://www.jb51.net/~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" /> @*页面js*@ <script src="https://www.jb51.net/~/Scripts/Home/Index_wenzhixin.js"></script>
（1）原始的初始化
<label for="sel_search_orderstatus">多选站点</label> <div> <select 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 for="sel_search_orderstatus2">disabled Select</label> <div> <select multiple="multiple"> ...... </select> </div> $(function () { $('#sel_search_orderstatus2').multipleSelect(); })
（3）设置分组和初始值
<label for="sel_search_orderstatus3">分组</label> <div> <select 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 for="sel_search_orderstatus4">单选</label> <div> <select multiple="multiple"> ....... </select> </div> $(function () { $('#sel_search_orderstatus4').multipleSelect({ placeholder: "请选择", single: true }); })
（5）筛选