jQueryプラグインChosenの使い方

はじめに

selectボックスをスタイリッシュにしてくれるjQueryプラグインChosenの使い方をまとめてみました。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

posted with amazlet at 13.06.12

西畑一馬
アスキー・メディアワークス
売り上げランキング: 4,610

Amazon.co.jpで詳細を見る

デモ

以下のサイトでChosenを体験することができます。

Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better

Chosenの基本的な使い方

１．jsライブラリをインクルードします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>

２．cssをインクルードします。

<link href="chosen.css" rel="stylesheet">

３．selectタグのclass属性にclass="chzn-select"を指定します。

<select data-placeholder="Choose a Country" class="chzn-select" style="width:350px;">
   <option>北海道</option>
   <option>青森</option>
   <option>岩手</option>
   <option>宮城</option>
   <option>秋田</option>
   <option>山形</option>
   <option>福島</option>
 </select>

４．ページの末尾で以下のスクリプトを指定します。これにより、chzn-selectクラスが指定された要素にChosenが適用されます。

<script type="text/javascript">
  $(".chzn-select").chosen();
  $(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>

コンボボックスが変更されたイベント

コンボボックスが変更されたイベントをキャッチするには以下のコードを書きます。

$("#pref2").chosen().change(function(event) {
  // ここに処理を書く
});

選択されたコンボボックスの値を変更したい場合は、以下のように取得できます。

$("#pref2").chosen().change(function(event) {
  // どちらの書き方でも選択した値が取得できます
  alert($('#pref2 option:selected').text());
  alert($(event.target).val());
});

選択済みの値を復元する

画面のオンロード時にhiddenフィールドに格納した値で選択値を復元したい場合、以下のようなコードを書きます。
ポイントは、trigger('liszt:updated');の部分で、selectボックスをアップデートするようです。*1

window.onload = function() {
  $('#pref2').val($('#hiddenValue').val());
  $('#pref2').trigger('liszt:updated');
}

小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。

はじめに

デモ

Chosenの基本的な使い方

コンボボックスが変更されたイベント

選択済みの値を復元する

関連エントリ