リストボックスの４連
先日も質問したものなんですがお願いします。
リストボックスで検索すると結果いくつもあるのですが、
いずれもセレクトボックスの様です。
私が教えてほしいのは、リストボックスから選択した項目を次のリストボックス、更に選択し次のリストボックスに・・・と３連続した結果、４番目のリストボックスに答えを表示したいのですが分かりません。
いろいろ調べてこんなのがありましたので引用させていただきましたがこれは２番目で結果が表示します。このソースをいろいろ変更したりしてみたんですが、うまくいきません。どなたか教えてくださいお願いします。
これ以外でも結構です。
<html lang="ja">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>sample</title>
<style type="text/css">
select { width: 100px; }
</style>
<script type="text/javascript">
//左リスト用連想配列
//キーは0からの連番にして下さい。アイテムが左リストのテキストになります。
var l_Array = {
'0' : '大阪', '1' : '京都', '2' : '兵庫', '3' : '奈良', '4' : '滋賀'
}
//右リストボックス用連想配列
//左リストのvalueをキーにします。
//アイテムはカンマで区切れば幾つにでも出来ます。
var r_Array = {
'0' : 'たこ焼き,通天閣',
'1' : 'やつはし,清水寺',
'2' : '明石焼き,甲子園',
'3' : '奈良漬,法隆寺,せんとくん,まんとくん',
'4' : '鮒寿司,琵琶湖'
}
//左リストのオプション群をhtmlソース中に
//直接書くのであれば、この関数は実行不要です。
function makeLeft() {
var sel = document.getElementById('l_sel');
var i;
for (i in l_Array) {
var opt = document.createElement('OPTION');
opt.setAttribute('value', i);
var tn = document.createTextNode(l_Array[i]);
opt.appendChild(tn);
sel.appendChild(opt);
}
}
//この関数で右側のアイテムを入替えてます。
//右リストのvalueは、左リストのvalue+0からの連番となります。
function repRight(e) {
var sel = document.getElementById('r_sel');
while (sel.hasChildNodes()) { sel.removeChild(sel.firstChild); }
var tgt = e.target || e.srcElement
var optArray = r_Array[tgt.value].split(',');
for (var i = 0; i < optArray.length; i++) {
var opt = document.createElement('OPTION');
opt.setAttribute('value', '' + tgt.value + i);
var tn = document.createTextNode(optArray[i]);
opt.appendChild(tn);
sel.appendChild(opt);
}
}
</script>
</head>
<body onload="makeLeft();"> <!-- makeLeftを実行しない場合は <body> とする -->
<table>
<tr>
<td>
<form name="l_frm" id="l_frm">
<select name="l_sel" id="l_sel" size=10 onchange="repRight(event);">
<!--
<option value="0">大阪</option>
<option value="1">京都</option>
<option value="2">兵庫</option>
<option value="3">奈良</option>
<option value="4">滋賀</option>
-->
</select>
</from>
</td>
<td>
<form name="r_frm" id="r_frm">
<select name="r_sel" id="r_sel" size=10>
</select>
</from>
</td>
</tr>
</table>
</body>
</html>
お礼
返信ありがとうございました。 できました。どうもです。m(_ _)m