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

時間 2019-12-06

標籤前端插件 jquery multi select 欄目 JQuery 简体版

原文原文鏈接

項目

此項目是替換標準<select>（含有multiple屬性的select標籤）的一套交互友好的組件。javascript

特色

免費（基於WTFPL許可證）css
支持鍵盤操做html
提供一些回調函數java
css徹底自定義jquery
依賴jQuery 1.8以上版本ide
總大小約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後執行的方法。this

afterSelect

類型:function
默認值：function(values){}
選中選項後執行的方法。spa

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