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

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

sponsors

使用方法

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側にも追記が必要になります。

サンプル


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