地味に便利!selectボックスをユーザーフレンドリーにするjQueryプラグイン「Chosen」

セレクトボックスって選択項目が長くなると幅が広がったり、項目がいっぱいあると下のほうが見つけにくかったりしますよね。
jQueryプラグインのChosenを利用すると、指定した幅で文字を折り返したり、検索機能をつけることができ、利用者によって使い勝手がかなり良くなります。

sponsors

使用方法

Chosenからファイル一式をダウンロード。
JavaScriptを以下のように記述します。

<link rel="stylesheet" href="chosen.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="chosen.jquery.js"></script>
<script type="text/javascript">
$(function(){
  $(".class名").chosen(); 
});
</script>
    

次に通常通り記載したselectボックスにdata-placebolderとclass名を追加し完成です。
data-placeholder部分に記述したものは最初のoption部分として表示され、どんな選択内容なのかを明記できます。

        <select data-placeholder="プレースホルダーのテキスト" style="width:250px;" class="class名">
          <option value=""></option> 
          <option value="項目1">項目1</option> 
          <option value="項目2">項目2</option> 
          <!-- 以下要素分 -->
        </select>

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net