このサンプルは、jQueryで独自の関数を作成して複数のドロップダウンリストを連動させます。サンプルに３個のドロップダウンリストが表示されいますが、左側から順番にアイテムを選択します。２番目と３番目のアイテムには自動的に関連するものが表示されます。
ドロップダウンリストのアイテムを連動させるには、option要素にclass属性を追加します。
<select id="parent">
<option value="1">Flower</option>
<option value="2">Animal</option>
</select>
<select id="child">
<option class="sub_1" value="1">Rose</option>
<option class="sub_1" value="2">Sunflower</option>
<option class="sub_1" value="3">Orchid</option>
<option class="sub_2" value="4">Cow</option>
<option class="sub_2" value="5">Dog</option>
<option class="sub_2" value="6">Cat</option>
<option class="sub_2" value="7">Tiger</option>
</select>
<select id="grandsun">
<option class="sub_1" value="1">Rose type 1</option>
<option class="sub_1" value="2">Rose type 2</option>
<option class="sub_1" value="3">Rose type 3</option>
<option class="sub_2" value="4">Sunflower type 1</option>
<option class="sub_2" value="5">Sunflower type 2</option>
<option class="sub_3" value="6">Orchid type 1</option>
<option class="sub_3" value="7">Orchid type 2</option>
<option class="sub_4" value="8">Cow type 1</option>
<option class="sub_4" value="9">Cow type 2</option>
<option class="sub_5" value="10">Dog type 1</option>
<option class="sub_6" value="11">Cat type 1</option>
<option class="sub_7" value="12">Tiger type 1</option>
<option class="sub_7" value="13">Tiger type 2</option>
<option class="sub_7" value="14">Tiger type 3</option>
</select>