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>
サンプル
