前端外掛一：jQuery Multi-Select多選外掛

FayneVALSK發表於2016-11-24
前端jQuery

專案

此專案是替換標準<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();
        }
    });
});

效果預覽

圖片描述

更多demo詳見參考文件：http://loudev.com/

相關文章