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）选择框未选中时的默认文本，可以理解为placeholderselectedText（# 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/closerefresh重新加载该复选框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条数据，其余不做显示）