jq多选加文件预览_前端插件一：jQuery Multi-Select多选插件

项目

此项目是替换标准(含有multiple属性的select标签)的一套交互友好的组件。

特点

免费(基于WTFPL许可证)

支持键盘操作

提供一些回调函数

css完全自定义

依赖jQuery 1.8以上版本

总大小约8kb

简单使用

HTML

选项1

选项2

选项3

选项4

选项5

选项6

选项7

选项8

JavaScript

$('#my-select').multiSelect();

选项

afterInit

类型:function

默认值：function(container){}

初始化multiSelect后执行的方法。

afterSelect

类型:function

默认值：function(values){}

选中选项后执行的方法。

afterDeselect

类型:function

默认值：function(values){}

取消选中后执行的方法。

selectableHeader

类型：HTML/Text

默认值：null

自定义可选区域header。

selectableFooter

类型：HTML/Text

默认值：null

自定义可选区域footer。

selectionHeader

类型：HTML/Text

默认值：null

自定义已选区域header。

selectionFooter

类型：HTML/Text

默认值：null

自定义已选区域footer。

disabledClass

类型：String

默认值：'disabled'

禁用状态选项的css class。

selectableOptgroup

类型：Boolean

默认值：false

为true时点击optgroup时等同于选中所有子选项。

keepOrder

类型：Boolean

默认值：false

为true时已选区域的选项根据选中顺序排序。

dblClick

类型：Boolean

默认值：false

为true时双击才会选中选项。

cssClass

类型：String

默认值：''

在multiselect容器(.ms-container)上添加自定义css class。

方法

.multiSelect(options)

初始化multi-select多选插件。

$('#my-select').multiSelect({});

.multiSelect('select', String|Array)

选中匹配值的一项或多项。

$('#my-select').multiSelect('select', '选项1');

$('#my-select').multiSelect('select', ['选项1', '选项3']);

.multiSelect('deselect', String|Array)

取消选中匹配值的一项或多项。

$('#my-select').multiSelect('deselect', '选项2');

$('#my-select').multiSelect('deselect', ['选项2', '选项4']);

.multiSelect('select_all')

选中所有选项。

$('#my-select').multiSelect('select_all');

.multiSelect('deselect_all')

取消选中所有选项。

$('#my-select').multiSelect('deselect_all');

.multiSelect('refresh')

刷新当前multi-select。

$('#my-select').multiSelect('refresh');

.multiSelect('addOption', Hash)

以键值对形式动态添加选项到multi-select。

key 类型 是否必填 描述

value String true 需添加的选项值

text String true 需添加的选项内容

index Number false 选项插入到从0开始的第几个位置，默认追加在选项的末尾

nested String false 如果存在optgroup，选项可以插入到某一optgroup下

$('#my-select').multiSelect('addOption', { value: 'test', text: 'test', index: 0, nested: 'optgroup_label' });

键盘操作

key 作用

[ ↓ ]下 选择下一个选项

[ ↑ ]上 选择上一个选项

[ — ]空格 选中当前选择的选项

[ ← ]左 切换到上一区域

[ → ]右 切换到下一区域

Demo

HTML

选择联系人

全选

全选

李一

李二

李三

李四

李五

李六

李七

李八

李九

李十

JavaScript

// 初始化

$('#optgroup').multiSelect({

selectableHeader: '',

selectionHeader: '',

selectableOptgroup: true,

afterSelect: function (values) {

select.modifyselectNum('#optgroup');

},

afterDeselect: function (values) {

select.modifyselectNum('#optgroup');

}

});

// 可选全选按钮

$('button.selectAll').click(function(){

$(selectId).multiSelect('select_all');

return false;

});

// 已选全选按钮

$('button.deselectAll').click(function(){

$(selectId).multiSelect('deselect_all');

return false;

});

// 搜索框实时查询

$('input.search-input').on('input propertychange', function() {

var inputValue = $(this).val().trim();

var $selections = $(selectId).siblings('.ms-container').find('.ms-selectable li.ms-elem-selectable');

$selections.each(function () {

var thisValue = $(this).children('span').text();

if (thisValue.match(inputValue)) {

$(this).show();

} else {

$(this).hide();

}

});

});

效果预览