HRR Co., Ltd.

技術的な記録を残していくことを目的としています。1次情報を大事にしています。

Chosenプラグインの使い方(基礎編)

はじめに

あまり日本語の情報がないので、まとめようと思いました。
マニュアルにないことを意識して書きます。
今回は基礎編ということで、割と浅い内容です。

その後、基礎編2を書きました。
hrroct.hatenablog.com

発展編も書きました。
hrroct.hatenablog.com

Chosenプラグインとは

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

「長くて扱いづらいセレクトボックスを使いやすいものにします」(勝手な意訳)
とあるように、selectタグのUIを変化させるものです。
リンク先にサンプルがたくさんあるので、実際にいじってみるのが早いです。

使い方

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

下記サイトを使って実際に書いてみました。
便利なサイトがあるものですね。

  1. Create a new fiddle - JSFiddle
  2. chosen - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

各ライブラリのバージョンですが、

jQuery 3.1.1
Chosen 1.6.2

を使います(装飾にbootstrapも少々)。
値をセットしたり、選択肢を変えた後には必ず更新イベントを実行するのがポイントでしょうか。

ベース

<select id="target">
  <option></option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  ...

選択された値を取得する

var value = $('#target').val();
var text  = $('#target option:selected').text()

値をセットする

// Chosenのバージョンが低い場合は'liszt:updated'で
$('#target').val(5).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');

基礎編は以上です。
また思い出したら、追記するかもしれません。