JavaScript連動セレクトボックスの問題と解決方法

このQ&Aのポイント
  • 現在、JavaScriptの勉強中です。三つの連動したセレクトボックスを利用して選択肢を絞り込もうと考えています。
  • セレクトボックスの選択肢の数を100個程度、または無制限にする方法について教えてください。
  • 現在のソースのロジックを解説していただけると助かります。
回答を見る
  • ベストアンサー

3連セレクトボックスで選択肢を変更し条件を絞り込む

現在、JavaScriptの勉強中です。 三つの連動したセレクトボックスを利用して選択肢を絞り込もうと考えています。 例えば最初のセレクトボックスで「都道府県」を選択させ、選んだ段階で、二番目のセレクトボックスに選んだ都道府県の中にある「市町村」を表示させる、 次に二番目の「市町村」の一つを選んだ段階で、三番目のセレクトボックスに選んだ「市町村」内の支店名を表示させ選択させる。というものです。 以下のようなソースがあるのですが、この内容だと、最初の選択肢の数が10個を超えた段階で次の選択肢が作動しなくなる事が、 動作上で確認されました。 一つのセレクトボックスの選択肢の数を100個程度、或いは、理論上無制限にするには、どの様にしたらよいかを考えています。 できれば、現在のソースのロジックの解説も併せて、ご教授頂ければ幸いです。 以下JavaScript内容--------------- var data = new Array("都道府県は?","東京都","神奈川","千葉"); var data0 = new Array("---"); var data1 = new Array("区は?","千代田区","中央区","品川区");    var data2 = new Array("市町村は?","横浜市","川崎市");     var data3 = new Array("市町村?","千葉市","市原市");     var data10 = new Array("---"); var data11 = new Array("支店名は?","千代田1号店","千代田2号店","千代田3号店"); var data12 = new Array("支店名は?","中央区1号店","中央区2号店","中央区3号店","中央区4号店","中央区5号店"); var data13 = new Array("支店名は?","品川1号店","品川2号店"); var data20 = new Array("---"); var data21 = new Array("支店名は?","横浜1号店","横浜2号店","横浜3号店","横浜4号店"); var data22 = new Array("支店名は?","川崎1号店","川崎2号店","川崎3号店"); var data30 = new Array("---"); var data31 = new Array("支店名は?","千葉1号店","千葉2号店"); var data32 = new Array("支店名は?","市原1号店"); function SetList(objid, arr){ var obj = document.getElementById(objid); for(i=obj.length; i>=0; i--){ obj.options[i] = null; } for(i=0; i<arr.length; i++){ obj.options[i] = new Option(arr[i]); obj.options[i].value = arr[i];}} 以下、HTML内容--------------- <body onLoad="SetList('sel0', data);" style="margin:0px;"> <div> <form> <select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel2',data0);SetList('sel1', eval('data' + this.selectedIndex))"> <option>---</option> </select> <select id="sel1" name="sel1" style="width:160px;" onChange="SetList('sel2', eval('data' + document.forms[0].sel0.selectedIndex + this.selectedIndex))"> <option>---</option> </select> <select id="sel2" name="sel2" style="width:160px;"> <option>---</option> </select> </form> </div> </body>

質問者が選んだベストアンサー

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答No.1

selectedIndex(選択項目番号)の返す値を使って配列へアクセスし 配列要素に合わせoption要素を生成してますね。これ自体は単純なものですから データ構造だけ抑えておけば良いと思います。例えば select要素'sel0'で扱うdataは配列名をそのままに select要素'sel1'で扱う配列に一文字足して配列名をdataA...とましょう。 select要素'sel2'で扱う配列はdataB...とします。 配列名でグループ化し、これに合わせソースコードを以下に変更します。 onChange="SetList('sel2',dataA0);SetList('sel1', eval('dataA' + this.selectedIndex))" onChange="SetList('sel2', eval('dataB' + document.forms[0].sel0.selectedIndex + this.selectedIndex))" dataAのグループはdataの各要素に関連付けされます。 dataの要素数が5なら、dataA0~dataA4の5つが必要になります。 var data = new Array("都道府県は?", "東京都", "神奈川", "千葉", "hoge"); //要素を一つ追加 var dataA0 = new Array("---"); var dataA1 = new Array("区は?", "千代田区", "中央区", "品川区");    var dataA2 = new Array("市町村は?", "横浜市", "川崎市");     var dataA3 = new Array("市町村?", "千葉市", "市原市"); var dataA4 = new Array("市町村?", "hoge市", "piyo市", "fuga市"); //追加したdata[4]に対応 //dataBのグループはdataA0~dataA4それぞれの各要素に対応します。 var dataB10 = new Array("---"); var dataB11 = new Array("支店名は?", "千代田1号店", "千代田2号店", "千代田3号店"); var dataB12 = new Array("支店名は?", "中央区1号店", "中央区2号店", "中央区3号店", "中央区4号店", "中央区5号店"); var dataB13 = new Array("支店名は?", "品川1号店", "品川2号店"); var dataB20 = new Array("---"); var dataB21 = new Array("支店名は?", "横浜1号店", "横浜2号店", "横浜3号店", "横浜4号店"); var dataB22 = new Array("支店名は?", "川崎1号店", "川崎2号店", "川崎3号店"); var dataB30 = new Array("---"); var dataB31 = new Array("支店名は?", "千葉1号店", "千葉2号店"); var dataB32 = new Array("支店名は?", "市原1号店"); //dataA4の各要素に対応した配列集合 var dataB40 = new Array("---"); //dataA4[0]に対応 var dataB41 = new Array("支店名は?", "hoge1号店", "hoge2号店"); //dataA4[1]に対応 var dataB42 = new Array("支店名は?", "piyo1号店"); //dataA4[2]に対応 var dataB43 = new Array("支店名は?", "fuga1号店", "fuga2号店"); //dataA4[3]に対応 要素数100の配列data末尾要素に対応する配列はdataA99 配列dataA99の要素n個に対応する配列はdataB990~dataB99(n - 1)となります。

juniper_se
質問者

お礼

my-- 様 早速のご返答、有難うございました。 ご指導の通りに、ソースコードを改良し、 作動することも確認できました。 当初の目的が達成できました。 感謝いたします。 有難うございました。

関連するQ&A

  • サブウィンドウのリンクに応じて親ウィンドウのセレクトメニューにデータを反映させる

    よろしくお願いします。 子ウィンドウ側の地下鉄南北線という文字リンクをクリックすると 00:北24条駅","01:札幌駅","02:大通駅"が親ウィンドウのセレクトメニューに反映されるように変えたいのです。下記のスクリプトを使ってどのように親ウィンドウと子ウィンドウに分ければいいのでしょうか? 駅名の数はそれぞれのリンクによって違います。 <html> <head> <title>セレクトメニューで選択したものに応じて2つめのセレクトメニューに反映させる</title> <script language="JavaScript" type="text/JavaScript"> <!-- var data = new Array(":交通",":地下鉄南北線",":地下鉄東西線",":地下鉄東豊線"); var data0 = new Array(":---"); var data1 = new Array("00:北24条駅","01:札幌駅","02:大通駅"); var data2 = new Array("10:西18丁目駅","11:西11丁目駅","12:大通駅","13:バスセンター前","14:東札幌"); var data3 = new Array("20:札幌駅","21:大通駅","22:豊水すすきの"); function SetList(objid, arr){ var obj = document.getElementById(objid); for(i=obj.length; i>=0; i--){ obj.options[i] = null; } for(i=0; i<arr.length; i++){ var a = arr[i].split(":"); obj.options[i] = new Option(a[1], a[0]); } } //--> </script> </head> <body onLoad="SetList('sel0', data);"> <form name="form1"> <select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel1', eval('data' + this.selectedIndex))"> <option>---</option> </select> <select id="sel1" name="sel1" style="width:160px;"> <option>---</option> </select> </form> </body> </html> どなたか教えていただける方がいましたらどうぞよろしくお願いいたします。

  • 動的セレクトボックスのSelectedについて

    以下のように、動的セレクトボックスを作りました。これ自体は問題なく動くのですが、selectedの指定方法がわかりません。例えば、ページ表示に「東京都」と「中央区」を選択している状態にしたいです。よろしくお願いいたします。 <html> <head> <script type="text/javascript"><!-- function SelectOption(parentValue, text, title, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; this.title = title; if(style) { this.style.cssText = style; } }; return this; } function SelectBox(id) { function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } var options = []; this.registOption = function(option) { options[options.length] = option; }; var child = null; this.setChild = function(childObj) { child = childObj; }; this.make = function(parentValue) { var obj = getObject(); if(obj) { obj.options.length = 0; var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } if(child) { child.make(obj.value); } } }; return this; } var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "都道府県", "1")); box1.registOption(new SelectOption(null, "神奈川県", "都道府県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "区市町村", "1")); box2.registOption(new SelectOption("1" , "中央区" , "区市町村", "2")); box1.setChild(box2); window.onload = function() { box2.make("1"); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2"></select> </select> </form> </body> </html>

  • リストボックスの4連

    先日も質問したものなんですがお願いします。 リストボックスで検索すると結果いくつもあるのですが、 いずれもセレクトボックスの様です。 私が教えてほしいのは、リストボックスから選択した項目を次のリストボックス、更に選択し次のリストボックスに・・・と3連続した結果、4番目のリストボックスに答えを表示したいのですが分かりません。 いろいろ調べてこんなのがありましたので引用させていただきましたがこれは2番目で結果が表示します。このソースをいろいろ変更したりしてみたんですが、うまくいきません。どなたか教えてくださいお願いします。 これ以外でも結構です。 <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>

  • セレクトボックスに"value"と"word"を付け加えたい。

    初めての投稿をさせてもらいます。JavaScript初心者な者で解る方がいらっしゃればご教授のほど宜しくお願いします。 質問させてもらいたい事はこちらのソースに"value"と"word"を付け加えることは出来ますでしょうか? 外部ファイルには /** * 選択肢クラス * @param parentValue 親の値(null:いつでも表示) * @param text 表示テキスト * @param value 値 * @param style CSS(省略可) */ function SelectOption(parentValue, text, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; if(style) { this.style.cssText = style; } }; return this; } /** * セレクトボックスクラス * @param id セレクトボックスID */ function SelectBox(id) { /** * IDに対応オブジェクトを取得 * @return オブジェクトorNULL */ function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } // オプションのリスト var options = []; /** * オプション登録 * @param condition 表示条件 */ this.registOption = function(option) { options[options.length] = option; }; // 子のオブジェクト var child = null; /** * 子のオブジェクトを設定する * @param childObj 子のオブジェクト */ this.setChild = function(childObj) { child = childObj; }; /** * オプション反映 * @param parentValue 親の値(null:全部表示) * ※比較に==を使っているのでundefinedもnullと等しく扱われる。 */ this.make = function(parentValue) { var obj = getObject(); if(obj) { // 選択肢削除 obj.options.length = 0; // 表示すべき選択肢抽出 var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } // 選択肢反映 obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } // 子のオブジェクトにも連鎖反映 if(child) { child.make(obj.value); } } }; return this; } HTMLファイルには <html> <head> <title>セレクトボックス親子関係</title> <script type="text/javascript" src="Select.js" charset="Shift_JIS"></script> <script type="text/javascript"><!-- var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "1")); box1.registOption(new SelectOption(null, "神奈川県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "1")); box2.registOption(new SelectOption("1" , "中央区" , "2")); box2.registOption(new SelectOption("2" , "横浜市" , "3")); box2.registOption(new SelectOption("2" , "川崎市" , "4")); var box3 = new SelectBox("sb3"); box3.registOption(new SelectOption(null, "詳細" , "0", "color:gray;")); box3.registOption(new SelectOption("1" , "一番町" , "1")); box3.registOption(new SelectOption("3" , "みなとみらい", "2")); box1.setChild(box2); box2.setChild(box3); window.onload = function() { box1.make(null); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2" onchange="box3.make(this.value);"></select> <select id="sb3"></select> </form> </body> </html> となっております。

  • JSでセレクトボックスの内容を切り替えたい

    年末を向かえましたが、クリアできない問題を抱えて焦っています。 あるショッピングサイトを構築しておりますが、 商品詳細ページでカラーを選択するとそれに対応したサイズを 表示させたいと思っています。 カラー、サイズ共に異なるセレクトボックスを使用しております。 //サンプルデータ(2次元配列) var dataStock = new Array(new Array("ブラック", "S", 2), new Array("ブラック", "M", 3), new Array("ホワイト", "S", 1), new Array("ホワイト", "M", 2), new Array("ホワイト", "L", 1), new Array("レッド", "M", 3), new Array("レッド", "L", 2)); var dataSize = new Array(); //----------------- とりあえずデータ表示 ----------------- document.write("<table border='1'>"); for(i=0; i<data.length; i++) { document.write("<tr>"); for(n=0; n<data[i].length; n++) { document.write("<td>"+data[i][n]+"</td>"); } document.write("</tr>"); } document.write("</table><br /><br />"); //----------------- カラー表示 ----------------- document.write("<select name='color' onchange=getNo2(this.value);>"); for(i=0; i<data.length; i++) { document.write("<option value='"+data[i][0]+"'>"+data[i][0]+"</option>"); } document.write("</select><br /><br />"); //----------------- サイズ表示 ----------------- function getNo2(color) { document.write("<select name='size'>"); for(i=0; i<data.length; i++) { //↓2次元配列から選択したカラーの情報を取得 if(color == data[i][0]) { dataSize[i] = data[i][1]; document.write("<option value='"+dataSize[i]+"'>"+dataSize[i]+"</option>"); } } document.write("</select>"); } 上記処理だと、「対応したカラーのサイズを表示する」という 目的は達成できますが、カラーを選択すると ページ全部がサイズに上書きされ、サイズのセレクトボックスしか 表示されません。 当たり前ですが・・・ いろいろ試してみましたが、どれもうまく行きませんでした。 何か良いアドバイスがあればご教授下さい。 よろしくお願い致します。

  • selectボックスの選択結果を変数に代入したい

    質問No.8512768の追加質問です。 先ほど同じ内容をOgre7077さんの補足に入れて投稿してしまいました。 LancerVIIさん、Ogre7077さん ご丁寧な説明を頂き、ありがとうございます。 LancerVIIさんのスクリプトを使ってセレクトボックスの表示内容は完成しました。すごく簡潔になりました。 それに追加してOgre7077さんの内部処理のスクリプトを入れてみましたが、 alertで月名がうまく表示出来ません。 セレクトボックスで月をセレクトした直後にその年月のカレンダーを表示させたいので月のセレクトボックスにもonhangeを追加しました。 勉強不足で大変申し訳ありませんが、下記スクリプトの添削をよろしくお願いします。 <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <style> </style> <script> var monthArray = new Array(); monthArray['y2014'] = new Array ( 1, 2, 3, 4 ); // 2014年が選択された場合に表示する月 monthArray['y2013'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); // 2013年が選択された場合に表示する月 monthArray['y2012'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2011'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2010'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2009'] = new Array ( 10, 11, 12 ); // 2012年が選択された場合に表示する月 function getSelectedText(obj) { var year = obj.options[obj.selectedIndex].value; // 選択された年を取得 var monthObj = document.getElementById('month'); // 月表示用のオブジェクトを取得 if ( year === '' ) { monthObj.length = 1; // 「----」が選択された場合は選択をクリアして処理終了 return; } var month = monthArray['y'+year]; // 年で表示月を取得 monthObj.length = month.length+1; // option用の領域を広げる for ( var i = 0; i < month.length; i ++ ) { monthObj.options[i+1].text = month[i]; // 取得した表示月の分、optionを追加する monthObj.options[i+1].value = month[i]; // 先頭には「--」が存在するためi+1から追加 } monthObj.options[0].selected = true; // 先頭の「--」を選択状態とする } </script> <body> <select name="year" onchange="getSelectedText(this);"> <option value="">----</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> </select><a>年 </a> <select name="month" id="month" onchange="goCalender(this);"> <option value="">--</option> </select><a>月</a> <script>/* function getSelectedText(obj){ var opt = obj.options[obj.selectedIndex]; goCalender.year = opt.text; goCalender(); } function goCalender(obj){ var me = arguments.callee; var selYear = me.year; var selMonth = me,month; alert(selYear + selMonth); }*/ </script> </body> </head> </html>

  • プルダウンに追加項目を加える方法

    過去記事にあった下記のプルダウンを使用させて頂いております。 選択できる項目を「くだもの→りんご→●●」ともうひとつ追加 するにはどうしたらよいのでしょうか? どうぞよろしくお願いします。 <html> <head> <script> <!-- /* データ定義部(ここをDB検索結果から生成) */ var dataMain = new Array(   new Array("1", "くだもの"),   new Array("2", "やさい"),   new Array("3", "さかな") ); var dataSub = new Array(   new Array(     new Array("1", "りんご"),     new Array("2", "みかん"),     new Array("3", "いちご")   ),   new Array(     new Array("1", "にんじん"),     new Array("2", "だいこん"),     new Array("3", "きゅうり")   ),   new Array(     new Array("1", "さば"),     new Array("2", "いわし"),     new Array("3", "さんま")   ) ); // プルダウンを初期化 function initSel() {   var selMain = document.forms[0].elements["selMain"];   // メインのプルダウンを初期化   setDataToSel(selMain, dataMain);   // 先頭を選択   selMain.selectedIndex = 0;   // 先頭を選択したのと同じ処理   changeSel(); } // プルダウンを選択したときの処理 function changeSel() {   var selMain = document.forms[0].elements["selMain"];   var selSub = document.forms[0].elements["selSub"];   // メインのプルダウンの選択値によりサブの選択肢データを取得   var data = dataSub[selMain.selectedIndex];   // サブのプルダウンの選択肢を入れ換え   setDataToSel(selSub, data); } // データを選択肢にセット function setDataToSel(sel, data) {   // 選択肢をいったんクリア   for(var i = 0 ; i < sel.options.length ; i++) {    sel.options[i] = null;   }   // 新しい選択肢を作る   for(var i = 0 ; i < data.length ; i++) {   var dt = data[i];    sel.options[i] = new Option(dt[1], dt[0]);   } } //--> </script> </head> <body onLoad="initSel()">  <form>   <p>    メイン:    <select name="selMain" size="1" onChange="changeSel()"></select>   </p>   <p>    サブ:    <select name="selSub" size="1"></select>   </p>  </form> </body> </html>

  • 選択肢変更型セレクトボックスの非干渉設置法

    以下のように、最初の親セレクトボックスで2番目の子セレクトボックスの選択肢を絞り込む、ソースコードがあります。 同じHTML中に全く別の選択要素を持った、同じ働きをする親子セレクトボックスを複数設置したいのですが(例えば、親要素=学区、子要素=その学区内毎の学校名)、お互いに干渉しない様に、2つ目以降の親子セレクトボックスを複数設置して行くには、2番目以降をどの様に改良したらよろしいでしょうか。 ご教授下さい。 以下HEAD要素======== names1=new Array('↓駅名を選んで下さい','A駅','B駅','C駅','D駅','E駅'); value1=new Array('↓駅名を選んで下さい','A駅','B駅','C駅','D駅','E駅'); names2=new Array('↓駅名を選んで下さい','F駅','G駅','H駅','I駅'); value2=new Array('↓駅名を選んで下さい','F駅','G駅','H駅','I駅'); names3=new Array('↓駅名を選んで下さい','J駅','K駅','L駅'); value3=new Array('↓駅名を選んで下さい','J駅','K駅','L駅'); names=new Array('',names1,names2,names3); values=new Array('',value1,value2,value3); len=0; for(i=0; i<names.length; i++)if(names[i].length > len)len=names[i].length; dore=0; function SelectChange(no){ if(no < 9){ no = '0'+no; } dore=document.getElementById('LINE'+no).selectedIndex; if(dore != 0){ atai=0; for(i=0; i<len; i++){ if(names[dore].length < len && names[dore].length <= i){ document.getElementById("STA"+no+1).options[i-atai]=null; atai++; }else{ document.getElementById("STA"+no+1).options[i]=new Option(names[dore][i],i); document.getElementById("STA"+no+1).options[i].value=values[dore][i]; } } } } 以下BODY要素======== 親= <select name=LINE01 id=LINE01 onChange=SelectChange(1) style="width:160px;"> <option value=''>↓沿線名を選んで下さい</option> <option value='路線1線'>路線1線</option> <option value='路線2線'>路線2線</option> <option value='路線3線'>路線3線</option> </select> 子= <select id=STA011 style="width:160px;" size=1 name=STA011> <option name=1 id=1 value=''>--------</option> </select>

  • 連動するセレクトボックスの内容を増やしたい

    お世話になります。 現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが3つなのですが、 7つの親と子のセレクトボックスを作りたいと思っています。 JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。 <script type="text/javascript"> var parentArray = new Array('東京都','神奈川県','静岡県'); ////親セレクトボックスを配列から書き出し function autoOptions(){ var parent=parentArray.length; var selectNumber = document.getElementsByTagName("select").length; for(var j=0;j<=selectNumber/2-1;j++){ idName='parent_'+j; document.getElementById(idName).length=parent+1; for(var i=0;i<parent;i++){ document.getElementById(idName).options[i+1].text= parentArray[i]; } } } ////連動セレクトボックス function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; if(document.getElementById(idParent).selectedIndex==0){ document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; } else { document.getElementById(idChild).selectedIndex=0; document.getElementById(idChild).length=1; var child = childArray[document.getElementById(idParent).selectedIndex-1]; document.getElementById(idChild).length=child.length+1; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i+1].text= child[i]; } } } ////子セレクトボックスの配列 var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); </script>

  • JavaScriptのセレクトボックスの連動について

    JavaScriptにて連動するセレクトボックスを作成しました。 ソースは下記となります。 ==================================================== <html> <head> <title>複数のSELECT タグ連動</title> <script type="text/javascript"> <!-- function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; var child = childArray[document.getElementById(idParent).selectedIndex]; document.getElementById(idChild).length=child.length; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i].text = child[i]; } } var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); // --> </script> </head> <body> <form name="myform" method="POST" action"#"> <select id="parent_0" onchange="selectBox(0)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_0"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_1" onchange="selectBox(1)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_1"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_2" onchange="selectBox(2)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_2"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> </form> </body> </html> ==================================================== 上記のソースで想定の動きをしてくれているのですが、 例えば、 神奈川県 小田原市 と選択し、ブラウザの更新をかけると、 神奈川県 渋谷区 になってしまいます。 ブラウザの更新をかけた際に、 双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか? よろしくお願いします。