前端插件一：jQuery Multi-Select多选插件
2021-06-27 00:06 512阅读 0赞
项目
此项目是替换标准<select>（含有multiple属性的select标签）的一套交互友好的组件。
特点
免费（基于WTFPL许可证）
支持键盘操作
提供一些回调函数
css完全自定义
依赖jQuery 1.8以上版本
总大小约8kb
简单使用
HTML
<html>
<head>
<link href='styles/multi-select/multi-select.css' rel='stylesheet'>
</head>
<body>
<select multiple='multiple' id='my-select' name='my-select'>
<option value='选项1'>选项1</option>
<option value='选项2'>选项2</option>
<option value='选项3'>选项3</option>
<option value='选项4'>选项4</option>
<option value='选项5'>选项5</option>
<option value='选项6'>选项6</option>
<option value='选项7'>选项7</option>
<option value='选项8'>选项8</option>
</select>
<script src='scripts//jquery-1.11.2.min.js' type='text/javascript'></script>
<script src='scripts/multi-select/jquery.multi-select.js' type='text/javascript'></script>
</body>
</html>
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
<div class="form-group p-t-xs">
<div class="row">
<div class="col-sm-6 p-r-lg">
<p class="text-size-md line-height-xl pull-left m-b-0">选择联系人</p>
<button type="button" class="selectAll btn btn-link text-size-sm pull-right">全选</button>
</div>
<div class="col-sm-6 p-r-0">
<button type="button" class="deselectAll btn btn-link text-size-sm pull-right">全选</button>
</div>
</div>
<select id="optgroup" multiple="multiple">
<option value="李一">李一</option>
<option value="李二">李二</option>
<option value="李三">李三</option>
<option value="李四">李四</option>
<option value="李五">李五</option>
<option value="李六">李六</option>
<option value="李七">李七</option>
<option value="李八">李八</option>
<option value="李九">李九</option>
<option value="李十">李十</option>
</select>
</div>
JavaScript
// 初始化
$('#optgroup').multiSelect({
selectableHeader: '<i class="fa fa-search pull-right p-r-sm" style="position:relative;top:9px;z-index:1;"></i><input class="search-input col-sm-12 border text-size-sm p-r-xl" type="text" placeholder="已有联系人" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;margin-top:-13px;">',
selectionHeader: '<input class="col-sm-12 border bg-white text-size-sm" type="text" disabled placeholder="已选联系人" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;">',
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();
}
});
});
效果预览
图片描述
