skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

複数のselect要素を連動させるJavaScript「Dependent Select」

｜ ｜ ｜ ｜ ｜ ｜ ｜

フォームなどで段階的に選択内容を絞り込ませられるとユーザビリティが向上しそうです。
jQueryプラグインDependent Selectでは複数のselect要素を連動させることが可能です。

使用方法
Dependent Selectからjquery.dependent.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dependent.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id2').dependent({
parent:'id', //親のid名
group: 'selectable'
});
});
</script>

上記を記述したらselect要素を以下のように書きます。
<select name="id" id="id" class="selectable">
<option value="">-- select --</option>
<option value="1" title="flowers" >Flowers</option>
<option value="2" title="animals" >Animals</option>
</select>

<select name="id2" id="id2" class="selectable">
<option value="">-- select --</option>
<option value="1" class="flowers" title="sunflower" >Sunflower</option>
<option value="2" class="flowers" title="rose" >Rose</option>
<option value="3" class="animals" title="dog" >Dog</option>
<option value="4" class="animals" title="cat" >Cat</option>
</select>

上記のように第1selectのtitleと第2selectのclassをあわせてください。
このルールにのっとれば、2階層だけでなく、3階層などにも対応可能です。
その際にはJS側にも追記が必要になります。

複数のselect要素を連動させるJavaScript「Dependent Select」サンプル

記事作成：2009年12月11日

前の記事：第1回 Twitter研究会に参加してみた
次の記事：簡単導入！画像をズームさせるJavaScript「loupe | a jQuery image magnifier」