多选下拉控件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，使用起来还算顺利，常规用到以下属性：

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

效果如下图：

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

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

效果图如下：

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

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

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

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

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

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

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

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

来自  http://blog.csdn.net/nihaoma71121/article/details/50971672