連動プルダウン(select)

javascript

選択子を絞りこむ為に多段連動するドロップダウンリストのJavascript。

→ サンプル

ポイントは…
optgroupでグルーピングしておくこと。


使い方

ライブラリ（ConnectedSelect.js）の読み込み

<script type="text/javascript" src="ConnectedSelect.js"></script>

連動するselectにidを付ける。
親にあたるoptionのvalueと
子にあたるoptgroupのlabelを対応させておく。

<select id="SEL1">
	<option value="XXX">XXX</option>
	<option value="YYY">YYY</option>
</select>
<select id="SEL2">
  <optgroup label="XXX">
	<option value="x1">x1</option>
	<option value="x2">x2</option>
  </optgroup>
  <optgroup label="YYY">
	<option value="y1">y1</option>
	<option value="y2">y2</option>
  </optgroup>
</select>
以下略

連動させるselectを初期化する。

<script type="text/javascript">
ConnectedSelect(['SEL1','SEL2','SEL3']);
</script>