select要素を検索できるように「Chosen」

当ページのリンクには広告が含まれています。

jQuery Plugin » フォーム » select要素を検索できるように「Chosen」

select要素を検索できるようにしてくれるプラグイン「Chosen」を紹介します。

jQueryプラグイン「Chosen」

このプラグインを使えば、セレクトボックスの要素をインスタンス検索できるようにしてくれます。

選択項目がやたらと多い場合などに便利なプラグインです。

その他にも「複数選択」にも対応しています。

それではデモページをご覧ください。

「Chosen」のデモ

デモのソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Chosen のデモでーす。">
<title>Chosen - jQuery Plugin Demo</title>
<link rel="stylesheet" href="chosen.css">
</head>
<body>
<h1>Chosen のデモでーす。</h1>
 
<form>
<select data-placeholder="都道府県を選択" class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<optgroup label="北海道地方">
<option value="北海道">北海道</option>
<optgroup label="東北地方">
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<optgroup label="関東地方">
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<optgroup label="中部地方">
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<optgroup label="近畿地方">
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<optgroup label="中国地方">
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<optgroup label="四国地方">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<optgroup label="九州地方">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</form>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="chosen.jquery.js"></script>
<script>
$(".chosen-select").chosen()
</script>
 
</body>
</html>

jQueryプラグイン「Chosen」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）