multiSelect 下拉多选插件

时间:2022-01-05 02:32:35
multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法。

使用方法:

1、引用 multiSelect.css及 multiSelect.js。

下载地址 http://loudev.com/

2、因为 multiSelect 是基于jquery开发的一款插件,所以在使用之前必须要引用jquery 1.8以上版本。

3、html代码中必须含有 multiple="multiple"
 <select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem </option>
<option value='elem_2'>elem </option>
<option value='elem_3'>elem </option>
<option value='elem_4'>elem </option>
</select>

4、js

$("#my-select").multiselect({
header: true,
height: 200,
minWidth: 200,
selectedList: 9999,
hide: [ "explode", 500 ],
noneSelectedText: "==请选择==",
checkAllText: "全选",
uncheckAllText: '全不选',
selectedList:4
close: function ()
{
}
});

5、参数

名称 类型 默认值 描述
afterInit function function(container){} 在multiSelect启动后调用的函数
afterSelect function function(values){} 选择一个元素后调用的方法。
afterDeselect function function(values){} 取消一个元素后调用的方法。
selectableHeader HTML/Text null 可选择的列表的标题
selectionHeader HTML/Text null 被选择的列表的标题
selectableFooter HTML/Text null 可选择的列表的页脚
selectionFooter HTML/Text null 被选择的列表的页脚
disabledClass String 'disabled' 禁用元素的css类
selectableOptgroup Boolean false 当设置为true时会选择所有的选项
keepOrder Boolean false 筛选
dblClick Boolean false 替换默认点击事件,通过dblclick选择项目
cssClass String "" 将自定义CSS类添加到多选择容器。

6、效果图

          multiSelect 下拉多选插件