[Dependent Selectライブラリ] 2つのセレクトメニューを連動させる
説明
Dependent Selectライブラリで2つのセレクトメニューを連動させるにはselectメニューを2つ用意します。連動させる親（元）のセレクトメニューにはID名を割り当てます。また、選択する項目(option)にはtitle属性でカテゴリを指定しておきます。このカテゴリに対応した項目をもう１つのセレクトメニュー（子）のoptionタグのclass属性に指定します。つまり親のtitle属性と子のclass属性を一致させておく必要があります。
HTMLの設定が終わったら$()で連動させたいセレクトメニューの子の方を指定してからdependent()メソッドを呼び出します。このdependent()メソッドのオプションパラメータのparentに連動させたい親のセレクトメニューのIDを指定します。この場合#や.（ドット）は不要で、そのままID名を記述します。必要であればgroupオプションにグループ名を指定することもできます。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dependent.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>連動するセレクトメニュー</h1>
<form>
<select name="os" id="os" class="selectable">
<option value="MacOS X" title="mac">MacOS X</option>
<option value="Windows" title="win">Windows</option>
<option value="Unix" title="unix">Unix</option>
</select>
<select name="ostype" id="ostype" class="selectable">
<option value="OS 9" class="mac">MacOS 9</option>
<option value="OS10.1" class="mac">MacOS X (10.1〜3)</option>
<option value="OS10.4" class="mac">MacOS X (10.4/Tiger)</option>
<option value="OS10.5" class="mac">MacOS X (10.4/Leopard)</option>
<option value="OS10.6" class="mac">MacOS X (10.4/Snow Leopard)</option>
<option value="win95" class="win">Windows 95</option>
<option value="win98" class="win">Windows 98/98SE</option>
<option value="winMe" class="win">Windows Me</option>
<option value="win2000" class="win">Windows 2000</option>
<option value="winXP" class="win">Windows XP</option>
<option value="winVista" class="win">Windows Vista</option>
<option value="win7" class="win">Windows 7</option>
<option value="FreeBSD" class="unix">FreeBSD</option>
<option value="Linux" class="unix">Linux</option>
<option value="HP-UX" class="unix">HP-UX</option>
<option value="Solaris" class="unix">Solaris</option>
<option value="etc" class="unix">その他</option>
</select>
</form>
</body>
</html>
【sample.js】
$(function(){
$("#ostype").dependent({
parent : "os"
});
});