jq-ui-multiselect插件的使用

本文主要介绍jq-ui-multiselect插件的使用，涉及相关参数以及如何使用插件。请注意是jq-ui-multiselect，不是jq-multiselect。当时我在查找参数时就找错了浪费了很多时间。

引入

jq-ui-multiselect依赖于jquery-ui，所以首先需要引入jquery-ui的script和css文件，而且要注意引入顺序，jquery-ui在前，jq-ui-multiselect在后。
（以下是相关的script顺序）

参数详解

属性(初始值)	备注
header（true）	Boolean或String，是否显示标题，指定标题文本
height（175）	选择框高度，可设置为‘auto’
minWidth（225）	最小宽度，如需禁用设置为‘auto’
checkAllText（Check all）	‘全选’功能按钮的文案
uncheckAllText（Uncheck All）	‘清空’功能按钮的文案
noneSelectedText（Select options）	选择框未选中时的默认文本，可以理解为placeholder
selectedText（# selected）	选择框选中时的默认文本，#代表选中几项，也可以根据selectedList展示为所有选中项
selectedList（false）	Number或Boolean，设置number表示显示行数，0或false不控制显示行数。
show/hide（’’）	展开或关闭速度，传递方式： [‘slide’, 200]/ [‘explode’, 200]
autoOpen（false）	加载后是否自动打开菜单
multiple（true）	多选控制

常用事件	备注
beforeopen	选择框打开前触发
open	选择框打开时触发
beforeclose	选择框关闭前触发
close	选择框关闭时触发
checkall	点击‘全选’功能按钮时触发
uncheckall	点击‘全不选’功能按钮时触发
click	选择某一项或取消某一项时触发

常用方法	备注
open/close
refresh	重新加载该复选框
disable	禁用复选框
checkAll	全选
uncheckAll	全不选
getChecked	返回该选择框中所有选中的项

使用方法

1.属性的使用方法：

2.事件使用方法：

3.方法的使用：

内置插件

如果需要使用【筛选】功能，还需要引入jquery.multiselect.filter；

jquery.multiselect.filter的使用方法：

注意事项及扩展一些思路

1.一定要引入jquery-ui;
2.注意引入顺序jquery / jquery-ui / jquery-ui-multiselect / jquery-ui-multiselect-filter；
3.如果是动态请求Ajax，需要在成功后刷新选择框，使用‘redresh’方法。具体操作如：$(’#test’).multiselect(‘refresh’);
4.如果需要在未搜索前不显示select中的option：可以使用jquery获取当前multiselect插件的input，使用setInterval监听input，如果value不为空，则调取Ajax显示option；
5.如果需要限制显示条数：multiselect插件自带属性只能限制显示区域的行数，而无法限制全部数据的行数。因为multiselect插件原理是首先获取Ajax数据，根据筛选关键词修改’display： none；’ 为 ‘display： list-item’ 去显示筛选后数据。因此我们可以通过同样的思路，即使用jq修改display: none去控制显示条数；

（下图示例为：若请求Ajax超过10条数据，则显示前10条数据，其余不做显示）