リストボックスの４連

解決済

質問者：uznozm
質問日時：2008/06/28 16:43
回答数：3件

先日も質問したものなんですがお願いします。
リストボックスで検索すると結果いくつもあるのですが、
いずれもセレクトボックスの様です。
私が教えてほしいのは、リストボックスから選択した項目を次のリストボックス、更に選択し次のリストボックスに・・・と３連続した結果、４番目のリストボックスに答えを表示したいのですが分かりません。
いろいろ調べてこんなのがありましたので引用させていただきましたがこれは２番目で結果が表示します。このソースをいろいろ変更したりしてみたんですが、うまくいきません。どなたか教えてくださいお願いします。
これ以外でも結構です。
<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();"> 
<table>
<tr>
<td>
<form name="l_frm" id="l_frm">
<select name="l_sel" id="l_sel" size=10 onchange="repRight(event);">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： _pipi_
回答日時：2008/06/28 19:38

<html>

<head><style> select{width:20ex;}</style></head>
<body>
<script>
window.onload = setList;
function $(o) { return document.getElementById(o); }
function setList(n){
switch(n){
default : mkopt(0,'q1:NISSAN q2:HONDA');break;
case 'q1': mkopt(1,'q11:スカイライン q12:Z'); break;
case 'q2': mkopt(1,'q21:NS-X q22:S2000'); break;
case 'q11': mkopt(2,'q111:R33 q112:GTR'); break;
case 'q12': mkopt(2,'q121:ノーマル q122:ニスモ仕様'); break;
case 'q21': mkopt(2,'q131:Type-R q132:Type-S'); break;
case 'q22': mkopt(2,'q141:Type-V q142:バリバリ仕様'); break;
case 'q111': mkopt(3,'q1001:普通 q1002:事故車'); break;
case 'q112': mkopt(3,'q1003:777万円 q1004:中古ないかも'); break;
case 'q121': mkopt(3,'q1005:オープン q1006:ノーマル'); break;
case 'q122': mkopt(3,'q1007:見た目だけ q1008:バリバリ'); break;
case 'q131': mkopt(3,'q101:無事故 q102:事故車'); break;
case 'q132': mkopt(3,'q10:製造中止 q102:中古'); break;
case 'q141': mkopt(3,'q101:17インチ q102:18インチ'); break;
case 'q142': mkopt(3,'q101:見た目仕様 q102:つくせる限り'); break;
}
}
function mkopt(n,s){
var str=s.split(' '),o=$('L'+n);
while(o.hasChildNodes()) o.removeChild(o.lastChild);
for(i in str){
var opt=document.createElement('OPTION');
var buf=str[i].split(':');
with(opt){ setAttribute('value', buf[0]); appendChild(document.createTextNode(buf[1]));}
with(o){ appendChild(opt);focus();}
}
}
</script>
</head>
<body>
<input type="hidden" value="abc" id="LL">
<select id="L0" size="10" onChange="setList(this.value)"></select>
<select id="L1" size="10" onChange="setList(this.value)"></select>
<select id="L2" size="10" onChange="setList(this.value)"></select>
<select id="L3" size="10" onChange="setList(this.value)"></select>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

_pipi_様早々にご回答戴き誠に有り難うございました。
正しく私の意図を理解してくださいまして、本当に感謝申し上げます。
早速参考にして使わせて戴きます。
私も、レベルアップを図って参りますので、今後も何卒よろしくお願いします。

通報する

お礼日時：2008/06/29 17:29

No.3

回答者： _pipi_
回答日時：2008/06/28 20:52

リストにするならsize="10"を消す

default : mkopt(0,': q1:NISSAN q2:HONDA');break;
のように、「:」と半角空白を追加すればいいかも。

<input type="hidden" value="abc" id="LL">
は必要ありません。消してください

追加したければ、コードも短いので簡単でしょう！^^;

- 0
- 件

通報する

この回答へのお礼

ご丁寧に補足有り難うございます。

通報する

お礼日時：2008/06/29 17:30

No.1

回答者： oka5130
回答日時：2008/06/28 19:11

1番目、2番目を選択すると3番目に答えが表示されるプログラムを書いてみました。

プルダウンが4つでも5つでも簡単に変更できるように作ってありますので、
処理の流れを追ってみて、必要に応じて書き換えてみてください。
関数は書き換え不要です。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<script type="text/javascript"></script>
</head>
<body>
<h1>サッカー世界ランク</h1>
<p>地域：<select id="select1" onchange="CreateOptions( 2, this.options[this.selectedIndex].value, true );"></select></p>
<p>国：<select id="select2" onchange="CreateOptions( 3, this.options[this.selectedIndex].value, false );"></select></p>
<p>順位：<select id="select3"></select></p>
</body>
</html>