連動プルダウン

システムで連動プルダウンを使いたくなって、色々調べたので覚え書きを。

親カテゴリを選ぶと、対応した子カテゴリを表示し、さらに子カテゴリを選ぶと孫カテゴリが・・・
という風なプルダウン。

連動プルダウンのJavaScriptはいろいろあるようですが、個人的に使いやすそうなConnectedSelect.jsを使用します。

こちらのサイトを参考にさせていただきました。


使い方

---

jQueryとファイルの組込み


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="ConnectedSelect.js"></script>

プルダウンメニューを作成 親カテゴリ<select id="SEL1"> <option value="">---</option> <option value="fruits">果物</option> <option value="vegetable">野菜</option> </select> 子カテゴリ<select id="SEL2"> <option value="">---</option> <optgroup label="fruits"> <option value="apple">りんご</option> <option value="melon">メロン</option> </optgroup> <optgroup label="vegetable"> <option value="tomato">トマト</option> <option value="cabbage">キャベツ</option> </optgroup> </select> 孫カテゴリ<select id="SEL3"> <option value="">---</option> <optgroup label="apple"> <option value="orin">王林</option> <option value="fuji">ふじ</option> <option value="kogyoku">紅玉</option> </optgroup> <optgroup label="melon"> <option value="andes">アンデスメロン</option> <option value="yubari">夕張メロン</option> <option value="musk">マスクメロン</option> </optgroup> <optgroup label="tomato"> <option value="momotaro">桃太郎</option> <option value="first">ファースト</option> <option value="furutica">フルティカ</option> </optgroup> <optgroup label="cabbage"> <option value="murasaki">ムラサキキャベツ</option> <option value="saboi">サボイキャベツ</option> <option value="ha">ハキャベツ</option> </optgroup> </select>
親カテゴリのoption valueと、子カテゴリのoptgroupのlabelを対応させておきます。

連動プルダウン初期化 <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script>

サンプルはこちら
valueとlabelを対応させるだけなので、DBとの連携も楽ですねー

おわり。