JS组件系列——两种bootstrapmultilect组件⼤⽐拼
前⾔：今天继续来看看bootstrap的另⼀个组件：multilect。记得在项⽬开始之前，博主项⽬组⼏个同事就使⽤哪些js组件展开过讨论，其中就说到了lect组件，由于项⽬的整体风格使⽤的bootstrap风格，所以在选⽤lect组件的时候优先考虑和bootstrap结合使⽤的。其中就找到了两个这种组件，⼤体样式和功能基本相同，经过⼀番讨论，项⽬组决定使⽤的bootstrap-multilect 组件，今天就来看看这两个组件的⽤法。
⼀、组件说明以及API
1、第⼀个组件是写bootstrap table的主⼈公封装的⼀个组件——。这个组件风格简单、⽂档全、功能强⼤。但是觉得它选中的效果不太好。关于它的效果展⽰，我们放在后⾯。还是给出对应的⽂档API。
2、第⼆个组件也是在github上⾯找的——。这个组件风格和第⼀个⾮常相似，⽂档也挺全⾯。
⼆、Multiple-lect组件
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="~/Scripts/jquery-1.10.2.min.js"></script>
@*bootstrap*@
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
@*multiple-lect*@
<script src="~/Content/multilect_wenzhixin/multiple-lect-master/multiple-lect.js"></script>
<link href="~/Content/multilect_wenzhixin/multiple-lect-master/multiple-lect.css" rel="stylesheet"/>
@*页⾯js*@
<script src="~/Scripts/Home/Index_wenzhixin.js"></script>
（1）原始的初始化
一场秋雨 <label class="control-label col-xs-1" for="l_arch_orderstatus">多选站点</label> <div class="col-xs-2" >
<lect id="l_arch_orderstatus" 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>
缺一不可</lect>
</div>
$(function () {
$('#l_arch_orderstatus').multipleSelect();
})
（2）设置选中和禁⽤
<label class="control-label col-xs-1" for="l_arch_orderstatus2">disabled Select</label> <div class="col-xs-2" >
<lect id="l_arch_orderstatus2" multiple="multiple">
......
</lect>
</div>
$(function () {
$('#l_arch_orderstatus2').multipleSelect();
})
（3）设置分组和初始值
<label class="control-label col-xs-1" for="l_arch_orderstatus3">分组</label> <div class="col-xs-2" >
<lect id="l_arch_orderstatus3" 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>
</lect>
</div>
$(function () {
$('#l_arch_orderstatus3').multipleSelect({
placeholder: "请选择"
});
})
（4）单选
<label class="control-label col-xs-1" for="l_arch_orderstatus4">单选</label> <div class="col-xs-2" >
<lect id="l_arch_orderstatus4" multiple="multiple">
.......
</lect>
</div>
$(function () {
$('#l_arch_orderstatus4').multipleSelect({
placeholder: "请选择",
single: true
});
})
（5）筛选
<label class="control-label col-xs-1" for="l_arch_orderstatus5">筛选</label>
<div class="col-xs-2" >
<lect id="l_arch_orderstatus5" multiple="multiple">
......
</lect>
</div>
$(function () {
$('#l_arch_orderstatus5').multipleSelect({
placeholder: "请选择",
filter: true
});
})
（6）更多参数：如果园友们有兴趣，可以看看源码⾥⾯的所有参数，虽然没有中⽂详解，但是根据英⽂的⼤概意思就能知道是⼲什么⽤的，如果你的multiple lect不想要默认的初始值，可以在初始化的时候去设置他们的值。如下是源码⾥⾯的默认参数列表。
isOpen
类型: boolean
是否打开下拉列表。
默认值为 fal。
placeholder
类型: string
显⽰默认的提⽰信息。
默认值为 ''。
lectAll
1972年属鼠的是什么命
类型: boolean
是否显⽰全选复选框。
默认值为 true。
lectAllText
类型: string
全选复选框的显⽰内容。
默认值为 Select all。
multiple
类型: boolean
是否在⼀⾏中显⽰多个选项。
默认值为 fal。
multipleWidth
类型: integer
⼀⾏中每个选项的宽度。
默认值为 80。
single
类型: boolean
是否只允许你选择⼀⾏。
默认值为 fal。
position
类型: string
定义下拉列表的位置，只能是 bottom 或者 top。默认值为 bottom.
filter
类型: boolean
是否开启过滤功能。
默认值为 fal。
width
类型: integer
定义下拉列表的宽度。
默认值为 undefined。默认与 lect 的宽度相同。
maxHeight
类型: integer
下拉列表的最⼤⾼度。
高一化学知识点总结
默认值为 250。
onOpen
当下拉列表被打开时触发。
onClo
当下拉列表被关闭时触发。
失眠吃什么药最好
onCheckAll
点击全选或者调⽤ “checkall” ⽅法时触发。
onUncheckAll
点击全不选或者调⽤ “uncheckall” ⽅法时触发。
onOptgroupClick
点击分组时触发。
onClick
点击⼀个复选框时触发
getSelects
获取 Multiple Select 选择内容。
参数: type
类型: string
选择内容的类型，value 或者 text。
默认值为 value。
tSelects
设置 Multiple Select 的内容。
参数: values
类型: array
选择框的内容信息。
enable
启⽤ Multiple Select。
disable
禁⽤ Multiple Select。在这种模式下，不允许⽤户操作。
老花眼的症状checkAll
全选所有的复选框。
$('lect').multipleSelect('checkAll');
uncheckAll
全不选所有的复选框。
$('lect').multipleSelect('uncheckAll');
refresh
重新加载 Multiple Select。
假如你是通过 AJAX 或者 DOM 来⼿动添加或者删除 option 选项，可以通过 refresh ⽅法来重新加载 Multiple Select。
三、Bootstrap-multilect组件
1、效果预览
（1）最原始的样⼦
（2）单选
