本文主要介绍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条数据，其余不做显示）