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

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

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

jQuery

$(function () { var drink_val; // ロード $(document).ready(function () { $('select[name=type]').hide().attr('disabled', 'disabled'); drink_val = $('select[name=drink]').val(); $('select[id=type' + drink_val +']').removeAttr('disabled').show(); }); // drink変更 $('select[name=drink]').change(function () { $('select[name=type]').hide().attr('disabled', 'disabled'); drink_val = $(this).val(); $('select[id=type' + drink_val +']').removeAttr('disabled').show(); }); });

後述されたプルダウンの値がリクエストされるのを防ぐため、非表示のプルダウンをdisabledにする。

HTML

<select name="drink"> <option value="0">---</option> <option value="1" selected>コーヒー</option> <option value="2">紅茶</option> </select> > <select name="type" id="type1"> <option value="1">ブルーマウンテン</option> <option value="2">コナ</option> <option value="3">キリマンジャロ</option> <option value="4">モカ</option> </select> <select name="type" id="type2"> <option value="5">アッサム</option> <option value="6">ダージリン</option> <option value="7">ウバ</option> </select>

サンプル

最新の記事

プロフィール

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