前端插件一：jQuery Multi-Select多选插件

一时失言乱红尘 2021-06-26 16:06 981阅读 0赞

## 项目 ##

此项目是替换标准`<select>`（含有`multiple`属性的`select`标签）的一套交互友好的组件。

## 特点 ##

*  免费（基于WTFPL许可证）
 *  支持键盘操作
 *  提供一些回调函数
 *  css完全自定义
 *  依赖jQuery 1.8以上版本
 *  总大小约8kb

## 简单使用 ##

### 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();
            }
        });
    });

### 效果预览 ###

![图片描述][20181231001513532.png]

[20181231001513532.png]: /images/20210626/a2bd9dce6cec4547a0fb902958c902cf.png