<label for="sel_search_orderstatus5">筛选</label> <div> <select multiple="multiple"> ...... </select> </div> $(function () { $('#sel_search_orderstatus5').multipleSelect({ placeholder: "请选择", filter: true }); })
（6）如果你的multiple select不想要默认的初始值，可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。
三、Bootstrap-multiselect组件
1、代码示例
初始化的过程和上面的类似，首先引用文件。
<script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.min.js"></script> <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" /> <script src="https://www.jb51.net/~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script> <link href="https://www.jb51.net/~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" /> <script src="https://www.jb51.net/~/Scripts/Home/Index_davidstutz.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').multiselect(); });
（2）设置选中和禁用
<label for="sel_search_orderstatus2">disabled Select</label> <div> <select 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 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" 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实战教程
以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭自己的感觉，使用起来都挺简单，功能基本类似，希望这篇文章对大家的学习有所帮助。
您可能感兴趣的文章: