- ベストアンサー
リストボックスの４連
先日も質問したものなんですがお願いします。 リストボックスで検索すると結果いくつもあるのですが、 いずれもセレクトボックスの様です。 私が教えてほしいのは、リストボックスから選択した項目を次のリストボックス、更に選択し次のリストボックスに・・・と３連続した結果、４番目のリストボックスに答えを表示したいのですが分かりません。 いろいろ調べてこんなのがありましたので引用させていただきましたがこれは２番目で結果が表示します。このソースをいろいろ変更したりしてみたんですが、うまくいきません。どなたか教えてくださいお願いします。 これ以外でも結構です。 <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>
- uznozm
- お礼率83% (5/6)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<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>
その他の回答 (2)
リストにするならsize="10"を消す default : mkopt(0,': q1:NISSAN q2:HONDA');break; のように、「:」と半角空白を追加すればいいかも。 <input type="hidden" value="abc" id="LL"> は必要ありません。消してください 追加したければ、コードも短いので簡単でしょう！^^;
お礼
ご丁寧に補足有り難うございます。
- oka5130
- ベストアンサー率66% (35/53)
1番目、2番目を選択すると3番目に答えが表示されるプログラムを書いてみました。 プルダウンが4つでも5つでも簡単に変更できるように作ってありますので、 処理の流れを追ってみて、必要に応じて書き換えてみてください。 関数は書き換え不要です。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"><!-- function ResetOptions( index ) { var select = document.getElementById( "select" + index ); while( select ) { for( var i = 0, len = select.length; i < len; i++ ) { select.options[0] = null; } CreateOption( select, "", "項目" + ( index - 1 ) + "を選択してください" ); index++; select = document.getElementById( "select" + index ); } } function CreateOption( select, key, value ) { var option = document.createElement( "OPTION" ); option.setAttribute( "value", key ); var text = document.createTextNode( value ); option.appendChild( text ); select.appendChild( option ); } function CreateOptions( index, value, pleaseSelect ) { var select = document.getElementById( "select" + index ); if( ! select ) { return; } for( var i = 0, len = select.length; i < len; i++ ) { select.options[0] = null; } var option, text, list; if( index > 1 ) { if( value ) { list = dataList[index-1][value]; } else { ResetOptions( index ); return; } } else { list = dataList[0]; } if( pleaseSelect ) { CreateOption( select, "", "↓選択してください" ); } for( var key in list ) { CreateOption( select, key, list[key] ); } ResetOptions( index + 1 ); } var dataList = [ { "asia": "アジア", "europe": "ヨーロッパ", "south_america": "南米" }, { "asia" : { "japan": "日本", "korea": "韓国" }, "europe": { "italy": "イタリア", "spain": "スペイン", "sweden": "スウェーデン" }, "south_america": { "brazil": "ブラジル", "argentina": "アルゼンチン" } }, { "japan": { "": "38位" }, "korea": { "": "45位" }, "italy": { "": "3位" }, "spain": { "": "4位" }, "sweden": { "": "30位" }, "brazil": { "": "2位" }, "argentina": { "": "1位" } } ]; window.onload = function() { CreateOptions( 1, null, true ); ResetOptions( 2 ); }; //--></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>
お礼
oka5130様早々にご回答戴きありがとうございます。 今回の疑問点でより深く広いところまで勉強したいと思いました。 参考にして作成したいと思います。
お礼
_pipi_様早々にご回答戴き誠に有り難うございました。 正しく私の意図を理解してくださいまして、本当に感謝申し上げます。 早速参考にして使わせて戴きます。 私も、レベルアップを図って参りますので、今後も何卒よろしくお願いします。