jQuery ドリルダウン HTMLに選択リストを設定
jQueryを使って簡易ドリルダウン
子要素にあたるプルダウンをHTML内に記述。
jQuery
$(function () {
var drink_val;
// ロード
$(document).ready(function () {
$('select[name=type]').hide().prop('disabled', true);
drink_val = $('select[name=drink]').val();
$('select[id=type' + drink_val +']').show().prop('disabled', false);
});
// drink変更
$('select[name=drink]').change(function () {
$('select[name=type]').hide().prop('disabled', true);
drink_val = $(this).val();
$('select[id=type' + drink_val +']').show().prop('disabled', false);
});
});
後述されたプルダウンの値がリクエストされるのを防ぐため、非表示のプルダウンを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>
サンプル
