多选下拉控件multiselect使用小结

项目开发中，需要用到多选下拉列表插件，由于项目前端框架采用了bootstrap，因此自然选择了bootstrap的组件。经了解其有两组插件：

1、第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select 。这个组件风格简单、文档全、功能强大。

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、第二个组件：bootstrap-multiselect 。这个组件风格和第一个非常相似，文档也挺全面。

bootstrap-multiselect源码主页： https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect文档以及Demo： http://davidstutz.github.io/bootstrap-multiselect/

笔者参考了“http://www.tuicool.com/articles/ANn2qa3”这篇文章进行初步了解。

在开发实践中，我使用了第2个组件：bootstrap-multiselect，对于第一组插件并未尝试实践。参考bootstrap-multiselect的api，使用起来还算顺利，常规用到以下属性：

var multiSelectOption={
		maxHeight:300,
		numberDisplayed:3, 
		optionClass: function(element) {
            var value = $(element).parent().find($(element)).index();
            if (value%2 == 0) {
                return 'even';
            }
            else {
                return 'odd';
            }
        },
        includeSelectAllOption: true,
        enableFiltering: true,
        selectAllJustVisible: true
};
           

分别为控制下拉容器最大高度、最多允许具体展示选中项数（其余以数字形式展示）、隔行换色控制、全选、支持检索。

<select  class= "form-control  myOwnDll"><option></option>...</select>
           

笔者数据源从后台动态获取
           

效果如下图：

根据页面排版想要控制其宽度自定义，因此给select标签设置宽度属性width，发现怎么也不生效，后来查看源码才发现，本插件是将select插件隐藏，在其下方生成了一组新标签用来呈现多选下拉样式（template）。因此要面临的第一个问题便是：自定义该多选下拉框的宽度。该宽度涉及三方面：btn组、显示选中结果span、下拉容器ul。为了能够控制到生成的多选下拉框组件，因此需要再包一层div：

<div class="myOwnDdl">
     <select class= "form-control"></select>
</div>
           

然后通过添加以下css样式类可有效控制多选下拉框的宽度：

/*自定义宽度*/
.myOwnDdl{
	display:inline-block;
	width:40%;
}

/* 实现宽度自定义 */
.myOwnDdl .btn-group{
	width:100%;
}
.myOwnDdl .multiselect {
	width:100%;
	text-align:right;
	margin-top:-5px;
}
.myOwnDdl ul {
	width:100%;
}
.myOwnDdl .multiselect-selected-text {
	position:absolute;
	left:0;
	right:25px;
	text-align:left;
	padding-left:20px;
}

/*控制隔行换色*/
.myOwnDll .multiselect-container li.odd {
    background: #eeeeee;
}
           

效果图如下：

即：使用时，在其上再包一层样式类包含myOwnDdl的div，则多选下拉列表即可与myOwnDdl容器的定义宽度一致。

继续开发，遇到另一需求：某些条件下，控制下拉列表可多选，某些条件下控制其为单选。

因此便开始找设置单选属性，根据api马上找到multiple属性，于是尝试：

$dom.multiselect({multile:false});

并没有任何效果，后来查看源码得知，本控件的单选及多选控制，是通过标签的multiple属性控制的，如果标签中有multiple属性，则为多选，否则为单选，本需求中需要将已经初始化为多选的下拉列表改为单选，如果将已有控件删除，重新添加再重新绑定数据源初始化，似乎代价有些大，就像让你给已有的房子加盖一间卫生间，而你的方式是拆了房子重新盖一样。对于已有插件，果真不能瞎琢磨，还是多看看官方文档，于是发现了.multiselect('destroy')，原理差不多，但性能上要好多了，因此通过以下方案实现多选变更为单选：

if($conditionDom.val()==="equals"||$conditionDom.val()==="not_equals"){
    $dllDom.removeAttr("multiple");
}else{
    $dllDom.attr("multiple","multiple");
}
$dllDom.multiselect("destroy").multiselect(multiSelectOption);
           

本次实践，遇到的问题总结大概就这么多了，另外在绑定值或清空时，仅val([])未生效（本赋值方式需使用数组），需要再执行refresh才生效：

$dom.multiselect().val([]).multiselect("refresh")

对于以上问题，第一组插件似乎更人性化（未实践，没有发言权），粗略看了下，第一组插件有个更好的地方在于，可以在一行中展示多组数据，需求促进实践...