Chosenプラグインの使い方（基礎編2）

はじめに

Chosenプラグインネタ、第2弾です。
次は「発展編」とするはずが、複数選択時の場合が抜けていたので、それをまず書きます。

第1弾はこちら:
hrroct.hatenablog.com

第3弾も書きました:
hrroct.hatenablog.com

忘れていた、複数選択の場合

サンプルはこちら。
Edit fiddle - JSFiddle

jQuery 3.1.1
Chosen 1.6.2
を使用しております。

ベース

multiple属性とdata-placeholder属性が指定されているのが、単一選択時との違いです。

<select id="target" data-placeholder="Choose Some Items..." multiple>
    <option></option>
    <option value="1">1st Option</option>
    <option value="2">2nd Option</option>
    ...

選択された値を取得する

配列で取得するように揃えてみました。

// 配列で返ります
var valueList = $('#target').val();

// こちらも配列で取得してみる
var textList = [];
$('#target option:selected').each(function() {
    textList.push($(this).text());
});

値をセットする

セットする値を配列で与えればOKです。

// Chosenのバージョンが低い場合は'liszt:updated'で
$('#target').val([5,6]).trigger('chosen:updated');

値をクリアする

こちらも配列で指定します。空の配列ですね。

// Chosenのバージョンが低い場合は'liszt:updated'で
$('#target').val([]).trigger('chosen:updated');

選択肢を追加する

これは単一選択時と変わらないですね。

// Chosenのバージョンが低い場合は'liszt:updated'で
var newOption = $('<option>').attr('value', 15).text('15th Option');
$('#target').append(newOption).trigger('chosen:updated');

有効化、無効化

これも単一選択時と変わらないですね。

// Chosenのバージョンが低い場合は'liszt:updated'で
// 無効化
$('#target').prop('disabled', true).trigger('chosen:updated');
// 有効化
$('#target').prop('disabled', false).trigger('chosen:updated');

以上でした！