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

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

使用方法 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>

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

sponsors

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

記事作成:
記事URL:

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