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

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

以下のように、動的セレクトボックスを作りました。これ自体は問題なく動くのですが、selectedの指定方法がわかりません。例えば、ページ表示に「東京都」と「中央区」を選択している状態にしたいです。よろしくお願いいたします。 <html> <head> <script type="text/javascript"></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2"></select> </select> </form> </body> </html>

セレクトボックスとテキストボックスの連動について

セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。ということをやりたく下記の様に設定しました。 <script> function hoge(obj){ var f=obj.form; var v=obj.options[obj.selectedIndex].value; var c=f.elements["comment"]; c.value+=v; obj.selectedIndex=0; } </script> <select name="質問事項1" onchange="hoge(this)"> <option value="selected">質問事項を選んでください</option> <option value=“質問1">質問1</option> <option value="質問2">質問2</option> <option value="質問3">質問3</option> </select> <textarea name="comment"></textarea> 現在発生している問題が1点あります。セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されます。例： 1回目セレクトボックス内「質問1」を選択 ↓ テキストボックス内「質問1」が表示 2回目セレクトボックス内「質問2」を選択 ↓ テキストボックス内「質問1質問2」と表示 2回目以降選んだ場合に前回の処理をクリアにして、1つのみ表示させたいと思うのですがどうやればいいのでしょうか。よろしくお願いします。

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>

セレクトボックスのvalue値でactionを変更

いつもお世話になっております。メニュー（セレクトボックス）のvalue値によってフォームのactionの内容を変更する方法を探しています。【JavaScript】ラジオボタンにより、formのaction内容を変更 http://okwave.jp/qa/q6003560.html という質問を見つけ、こちらのラジオボタンをセレクトボックスに変更したのですが、動作しません。 javascriptを変更しなくてはいけないのだとは思うのですが、まったくの素人のため、検討もつかず、相談に伺いました。 <script type="text/javascript">  </script> </head> <body> <form action="" onSubmit="return check(this)"> <input name="key" type="text" value=""> <select name="aaa"> <option value="" selected>Category</option> <option value="A">AAA</option> <option value="B">BBB</option> <option value="C">CCC</option> </select> <input type="button" value="Go"> </form> </body> </html> お分かりになる方、教えていただけると助かります。よろしくお願いいたします。

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>

セレクトボックス連動

過去の質問にありましたソースを参考にセレクトボックスの連動タイプをphpを絡めて作っています。 DBから取出した　menua　に入る値を初期値に設定したいのですがうまくいきません。 menua　には　AAA、BBB、CCCが入ります。初期値を変えるにはどのようにすればいいのでしょうか。また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> <body> <form name="FORM1"> <select name="menua" onchange="setSubMenu(this.selectedIndex)"> </select> <select name="menub" > </select> </form> </body> </html>

２つのコンボボックスの連携

以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript">  </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>

親子連動型のselectを設置し、さらにselectedを設定したい。

以下のソースのように、親子連動型のselectを作成しています。ですが、特定の値にselectedを設定するところで行き詰っています。例えば、 dai_komokuのselectedが大項目２で chu_komokuのselectedが中２－３というようなかたちです。このような事は可能なのでしょうか？可能であれば教えていただければ幸いです。 <script type="text/javascript">  </script> <form method="post" action="hoge.php" name="writeform"> 大項目 <select name="dai_komoku" onchange="changelist()"> <option value="" selected>--選択してください--</option> <option value='1'>大項目１</option> <option value='2'>大項目２</option></select> <br> 中項目 <select name="chu_komoku"></select> </form>

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

お世話になります。現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが３つなのですが、７つの親と子のセレクトボックスを作りたいと思っています。 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>

セレクトメニューの4連動

いつも参考にさせて頂いております。 javascript初心者です。現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。一つ目のセレクトで、地域の選択二つ目のセレクトで、県の選択三つ目のセレクトで、「プレイスポット」か「食事」の選択四つ目のセレクトでは、プレイスポット名(三つ目でプレイスポット選択時) お店名(三つ目で食事選択時) 上記したようにしたいのです。宜しくお願いします。 <html> <head> <script type="text/javascript">  </script> </head> <body> <form name="form1"> <select name="sel1" onChange="setA(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">関西</option> </select> <select name="box_a" onChange="setB(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_b" onChange="setC(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_c" onChange=""><option value="0" selected>---------------</option></select> </form> </body> </html>

連動セレクトボックスを同一ページにもう一つ追加したい

今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。説明下手ですみません・・　例えばですけど htmlには、 <html> <head> <title>あ</title> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:"02_11"}, {key:"小樽市",value:"02_12"}, {key:"その他市町村",value:"02_099"}], ["青森", {key:"青森市",value:"03_01"}, {key:"弘前市",value:"03_02"}, {key:"その他市町村",value:"03_099"}], ["岩手県", {key:"盛岡市 ",value:"04_01"}, {key:"宮古市",value:"04_02"}, {key:"その他市町村",value:"04_099"}], ["宮城県", {key:"石巻市",value:"05_06"}, {key:"塩竈市",value:"05_07"}, {key:"その他市町村",value:"05_099"}] ]; この他にもう一つ別窓で <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> <body> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["プログラミング", {key:"HTML",value:"11_01"}, {key:"JavaScript",value:"11_02"}, {key:"その他市",value:"11_099"}], ["データベース", {key:"Oracle",value:"12_01"}, {key:"MySQL",value:"12_02"}, {key:"その他市",value:"12_099"}] ]; と書いたセレクトリストをもう一つ追加したいのです。が何度やっても上手くいきません。

セレクトメニューの連動、そしてページへのリンク

[セレクトメニューA] > [セレクトメニューB] > [セレクトメニューC] …というような、まずAで選び、それに対応したメニューBのうちのひとつを選び、そして最後にCのうちのひとつを選ぶと、 (たとえば、Cのセレクトメニューには Yahoo Google Excite のようなのがあり、それらを選択すると、) あらかじめ設定しておいた該当するページへ行く、というようなしくみはどのように作ればいいのでしょうか？ネット上を探し回って、自分で組み立てて作ってみましたが、  ───────────────── <form name="myForm"> <select name="a" onchange="setMenu(this.selectedIndex)"> <option checked selected>セレクトA</option> <option value="A">A</option> <option value="E">E</option> <option value="H">H</option> </select> > <select name="sb" onchange="setMenuItem(this.selectedIndex)"> <option selected>　</option> </select> > <select name="s" onChange="popJump(this)"> <option selected >　</option> </select> </form> …と、３つを連動させるまでにはいたったのですが、最後の、「セレクトCを選んだときに該当ページへジャンプ」というのができません。このプログラムにどのような修正を加えればよいのでしょうか？よろしくお願いいたします。

select要素のvalueを配列で取得したいです

select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。 <html> <head></head> <body> <form>  </form> <input type="button" value="はい" onclick="test(this.form)"> <script type="text/javascript"> function test ( form ) { var values = new Array(); for ( var i=0; i < 20; i ++ ) { var elm = form.elements['c'+i]; values[i] = elm.options[elm.selectedIndex].value; } } </script> </body> </html> このようなサンプルを動かそうとしたのですが、 var elm = form.elements['c'+i];のところの['c'+i]が正しくないようで「elm is underfind」というエラーが出てしまいます <script> function myForm (form) { var values = new Array(); for ( var i=0; i<20; i++ ) { var elm = form.elements[i]; values[i] = elm.options[elm.selectedIndex].value; document.write(values[i] + "<br />"); } } </script> インデックス名を'c'+iからiにすると取得できるのですが、ブラウザが読み込みをやめない状態になってしまいます。 select要素のnameはc1から始まりc20と何も換えていません。何が間違っているのでしょうか。

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>"); } 上記処理だと、「対応したカラーのサイズを表示する」という目的は達成できますが、カラーを選択するとページ全部がサイズに上書きされ、サイズのセレクトボックスしか表示されません。当たり前ですが・・・いろいろ試してみましたが、どれもうまく行きませんでした。何か良いアドバイスがあればご教授下さい。よろしくお願い致します。

複数のセレクトメニューを制御するとき・・・

どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。ネットで探した方法で、セレクトメニュー１の項目を選択したときにセレクトメニュー２の項目を変化させる制御をしています。このフォームでDBにvalue値（1,2など数値で）を送信するようにしたいのですがこの方法ですとセレクトメニュー２のvalue値が0（NULL）となってしまい上手く送信できません。配列に文字列を入れていますし、DBの型をintにしているので0になってしまっていると思うのですが、文字列としては送信したくはありません。どのような方法でしたら文字列ではなく、上手くvalueに数値を入れることが出来るでしょうか。どうかよろしくおねがいします。以下使用しているコードです。 <html> <head> <title>テストテスト</title> <script language="JavaScript"></script> </head> <body> <form name="aaa"> <select name="Maker" onChange="setMenuItem(this.selectedIndex)"> <option value="" selected>--- 選択してください ---</option> <option value="1">ひとつ</option> <option value="2">ふたつ</option> <option value="3">みっつ</option> <option value="4">よっつ</option> </select> <select name="bbb"> <option value="" selected>--- 選択してください ---</option> </select> </form> </body> </html>

今日の日付を自動的にセレクトしたいのですが・・・。

うまくできません。どなたか助けていただけないでしょうか？よろしくおねがいします。今のソースはこんな状態です。 onChange="setDate(this.form);"は4月の時に30日までとかにつかっています。  var date=new Date(); var year = date.getYear(); var year= (year< 2000) ? year+1900 : year; var mon=date.getMonth(); var day=date.getDate(); alert(mon); function setNow(form){ for(var i = 0;i<document.nanngatu.nanngatu.options.length;i++){ if(document.nanngatu.nanngatu.options[i].text==mon){ document.nanngatu.nanngatu.options.selectedIndex=i; break; } } } --間は省略-- <onLoad="setNow(this.form)" > <form name="nanngatu"> <select name="nanngatu" onChange="setDate(this.form);" > <option value="32">1</option> <option value="30">2</option> <option value="32">3</option> <option value="31">4</option> <option value="32">5</option> <option value="31">6</option> <option value="32">7</option> <option value="31">8</option> <option value="32">9</option> <option value="31">10</option> <option value="32">11</option> <option value="31">12</option> </select>月

セレクトボックスの連動

セレクトボックスＡを切り替えると、他のセレクトボックスがＡと同じになるようなものを作りたいのですが、うまくいきません。ソースは以下の通りです。 function ChangeSelect() { var index = formA.selectA.selectedIndex; for (i=1,i<formB.selectCnt.value,i++) { if (i == index) { FormB.selectB1.options[index].value ); } } } <form name="formA"> <select name="selectA" onchange="javascript:ChangeSelect()"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> <form name="formB> <input type="hidden" name="selectCnt" value=***> <select name="selectB1"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> 存在するセレクトボックスは全て同じ値が入っています。 formAにはセレクトボックスは1つですが、formBにあるセレクトボックスは0～複数と場合によって異なります。 formBにあるセレクトボックスはselectB1、selectB2、selectB3という感じに最後の数字のみが異なるnameがつくようにしています。 <input type="hidden" name="selectCnt" value=***>のvalueには、ASPで数えたセレクトボックスの数を入れています(セレクトボックスが10個あれば10と入ります) 数が決まっていればFormB.selectB1.options[index].valueを数の分だけ増やせばいいのですが、0の時もあれば10の時もある、という場合にはどういう風に書けばいいのかわかりません。どのように記述すれば良いのでしょうか。アドバイスお願いします＞＜

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

よろしくお願いします。子ウィンドウ側の地下鉄南北線という文字リンクをクリックすると 00:北24条駅","01:札幌駅","02:大通駅"が親ウィンドウのセレクトメニューに反映されるように変えたいのです。下記のスクリプトを使ってどのように親ウィンドウと子ウィンドウに分ければいいのでしょうか？駅名の数はそれぞれのリンクによって違います。 <html> <head> <title>セレクトメニューで選択したものに応じて2つめのセレクトメニューに反映させる</title> <script language="JavaScript" type="text/JavaScript">  </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> どなたか教えていただける方がいましたらどうぞよろしくお願いいたします。

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

以下のように、最初の親セレクトボックスで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のセレクトボックスの連動について

JavaScriptにて連動するセレクトボックスを作成しました。ソースは下記となります。 ==================================================== <html> <head> <title>複数のSELECT タグ連動</title> <script type="text/javascript">  </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> ==================================================== 上記のソースで想定の動きをしてくれているのですが、例えば、神奈川県　小田原市と選択し、ブラウザの更新をかけると、神奈川県　渋谷区になってしまいます。ブラウザの更新をかけた際に、双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか？よろしくお願いします。

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

みんなの回答

補足 2007/05/19 21:13

関連するQ&A