jQuery ドリルダウン JSに選択リストを設定

jQueryを使って簡易ドリルダウン

子要素にあたるプルダウンをJavaScript内に記述。

jQuery

$(function () { // 選択リスト var type_coffee = '<option value=\"1\">ブルーマウンテン</option>'; type_coffee += '<option value=\"2\">コナ</option>'; type_coffee += '<option value=\"3\">キリマンジャロ</option>'; type_coffee += '<option value=\"4\">モカ</option>'; var type_tea = '<option value=\"5\">アッサム</option>'; type_tea += '<option value=\"6\">ダージリン</option>'; type_tea += '<option value=\"7\">ウバ</option>'; var type_unselected = '<option value=\"0\">---</option>'; // 初期設定 setType($('select[name=drink]').val()); // drink変更 $('select[name=drink]').change(function () { setType($(this).val()); }); // 共通処理 function setType(drink_val) { if (drink_val == '1') { $('select[name=type]').html(type_coffee); } else if (drink_val == '2') { $('select[name=type]').html(type_tea); } else { $('select[name=type]').html(type_unselected); } } });

HTML

<select name="drink"> <option value="0">---</option> <option value="1" selected>コーヒー</option> <option value="2">紅茶</option> </select> > <select name="type"> <option value="0">---</option> </select>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。