select要素をプルダウンに拡張するjQuery.selectable.js-JavaScript Library Archive

select要素をプルダウンに拡張するjQuery.selectable.js

配布元：selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js
ライセンス:MITライセンス

select要素でセレクトボックスを作成した際に、情報量が多いと非常に選択肢が多く探すのが難しいことがある。都道府県を検索する際に多くの人が経験したことがあるだろう。

jQuery.selectable.jsはセレクトボックスをプルダウンメニューに変更し、簡単に検索できるように変更するJavaScriptライブラリだ。

使い方

jQueryと配布サイトよりダウンロードしたjquery.selectable.js、スキン用のCSSファイルをhead要素などで読み込みます。

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="jquery.selectable.js"></script>
<link type="text/css" rel="stylesheet" href="skin/natural/style.css" />

プルダウンに変更したいselct要素はoptgroup要素によりグループ分けを行い、name属性とid属性を記述しておきます。

<select id="pref" name="pref">
	<optgroup label="北海道">
		<option value="01">北海道</option>
	</optgroup>
	<optgroup label="東北">
		<option value="02">青森県</option>
		<option value="03">岩手県</option>
		<option value="04">宮城県</option>
		<option value="05">秋田県</option>
		<option value="06">山形県</option>
		<option value="07">福島県</option>
	</optgroup>
	<optgroup label="関東">
		<option value="08">東京都</option>
		<option value="09">茨城県</option>
		<option value="10">栃木県</option>
		<option value="11">群馬県</option>
		<option value="12">埼玉県</option>
		<option value="13">千葉県</option>
		<option value="14">神奈川県</option>
	</optgroup>
	<optgroup label="北陸">
		<option value="15">富山県</option>
		<option value="16">石川県</option>
		<option value="17">福井県</option>
	</optgroup>
	<optgroup label="甲信越">
		<option value="18">新潟県</option>
		<option value="19">山梨県</option>
		<option value="20">長野県</option>
	</optgroup>
	<optgroup label="東海">
		<option value="21">岐阜県</option>
		<option value="22">静岡県</option>
		<option value="23">愛知県</option>
		<option value="24">三重県</option>
	</optgroup>
	<optgroup label="関西">
		<option value="25">滋賀県</option>
		<option value="26">京都府</option>
		<option value="27">大阪府</option>
		<option value="28">兵庫県</option>
		<option value="29">奈良県</option>
		<option value="30">和歌山県</option>
	</optgroup>
	<optgroup label="中四国">
		<option value="31">鳥取県</option>
		<option value="32">島根県</option>
		<option value="33">岡山県</option>
		<option value="34">広島県</option>
		<option value="35">山口県</option>
		<option value="36">徳島県</option>
		<option value="37">香川県</option>
		<option value="38">愛媛県</option>
		<option value="39">高知県</option>
	</optgroup>
	<optgroup label="九州">
		<option value="40">福岡県</option>
		<option value="41">佐賀県</option>
		<option value="42">長崎県</option>
		<option value="43">熊本県</option>
		<option value="44">大分県</option>
		<option value="45">宮崎県</option>
		<option value="46">鹿児島県</option>
	</optgroup>
	<optgroup label="沖縄">
		<option value="47">沖縄県</option>
	</optgroup>
</select>

script要素などでスクリプトを実行します。$(“…”)内に変更を行いたいselect要素をCSSセレクタで指定します。

$(function(){
	$("select#pref").selectable();
});

サンプル

option要素にclass=”br”を付加することにより任意の位置で改行を行うことも可能です。

デザインの変更

標準ではselectableとnaturalの2種類のスキンが提供されており、CSSファイルを読み込む際に選択したスキンが反映されます。

<link type="text/css" rel="stylesheet" href="skin/natural/style.css" />

スキン「natural」を読み込んだサンプル

拡張

プルダウンの表示形式・表示非表示の際のエフェクト・表示速度・不透明度・プルダウン位置の微調整・プルダウンの高さなどの変更が可能です。

表示形式

styleに”simpleBox”を指定することによりデザイン可能な通常のプルダウンに変更されます。heightで高さを合わせて指定しておく必要があります。また、optgroupによる指定はできません。

$(function(){
	$("select#pref").selectable({
		style: "simpleBox",
		height: 150
	});
})

エフェクト

setにslideDownやfadeInを指定することによりプルダウン表示時のエフェクトを、outにslideUpやfadeOutを指定することによりプルダウンを非表示にする際のエフェクトを、opacityに0～1の値(.9など)を指定することによりプルダウンの透過度を制御することができます。

$(function(){
	$("select#pref").selectable({
		set: "slideDown" ,
		out: "slideUp" ,
		inDuration: "fast",
		outDuration: "fast" ,
		opacity: .9
	});
})

サンプル