ベストアンサー

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

2007/04/07 03:23

今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。説明下手ですみません・・　例えばですけど 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"}] ]; と書いたセレクトリストをもう一つ追加したいのです。が何度やっても上手くいきません。

aiai04
お礼率11% (3/26)

JavaScript
回答数5
ありがとう数2

みんなの回答 （5）
専門家の回答

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

ベストアンサー

leap_day
ベストアンサー率60% (338/561)

2007/04/09 00:05 回答No.5

こんにちはご提示のサイトではjavascriptエラーが出るのに自分のではでないのでおかしいな～と思って(ネチケット違反なので本当はやってはいけないのだと思いますが)失礼ながらselectMenu.txtをurlダイレクトで覗かせてもらいました　ｍ（－－）ｍ ≪結果≫ selectMenu.txtにはdataしか記入されていないですよね？ data1のほうは別のファイルに書き込んであるのですか？そのためdata1のほうはデータを読み込んでいないので表示されないということになってます（＞＜）別のファイルに書かれているのであればもう1行 <script type="text/javascript" src="*****.txt"></script> が必要になりますもしくはselectMenu.txtの中にdata1も書き込んでやる必要があります ≪jsファイルについて≫ 空白のページが表示されたということはselectMenu.jsが読み込まれていない為だと思います jsファイルの作り方は『名前をつけて保存』のときに『ファイルの種類』を『すべてのファイル』にして『ファイルの名前』に『selectMenu.js』(見えにくいですけど　『名前(ドット)js』です）と打ち込むと作ることができます(txtファイルとは違うアイコンのファイルになってるはずです） ≪url直リンクについて≫ 上記のようにurlにファイル名を直接打ち込んでやるとそのデータを覗き見ることができますですのでその対処もしておかないといけません http://www.broadband-xp.com/hidesource/js.html こちらはソース文を見られなくする方法なのでちょっと違いますけど『直リンク』とかで検索すると色々出てきます（＾＾）僕もまだ作成中なので実際に直リンク禁止を試したことは無いので詳しいところは分からないです(新規に質問してみる？)

質問者

お礼 2007/04/09 02:51

leap_dayさま、お返事遅くなりましてすみませんでした。 leap_dayさまのお力で無事表示さす事が出来ました。またurl直リンクについてもこれから勉強していきたいと思います。本当にありがとうございました。

その他の回答 (4)

leap_day
ベストアンサー率60% (338/561)

2007/04/08 13:14 回答No.4

こんにちは変ですね～～ご提示のスクリプトもちょこっと修正したけど表示されましたけど・・・ ≪修正≫ Firefoxで文字化けしたので外部ファイルはjsファイルに変えましたあとはほぼそのままです（＾＾） printを使ってるのでcgiファイルでやってるのかな？と思うのでそちらで書きますね (最初の1行は環境によって違うかもしれません。僕はApacheなのでこの記述になってます） #! c:/perl/bin/perl -w # ライブラリー取り込み require 'jcode.pl'; &html; sub html { print "Content-type: text/html\n\n"; print <<""; <html> <head> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"> <title>新規ホームページ登録</title> <script type="text/javascript" src="selectMenu.js"></script> <script type="text/javascript">  </script> </head> <body>  # print <<""; <br> <form action="****.cgi" method="post" name="FORM2"> ～中略～<br> <select name="Fkt1" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="Fkt2" > </select> <br> <select name="Fkt3" onchange="setSubMenu1(this.selectedIndex)"> </select> <br> <select name="Fkt4" > </select> <br>～中略～ </form> </body></html>  exit; }

質問者

補足 2007/04/08 21:04

leap_dayさま、お返事遅くなりましてすみませんでした。何度も見直してご指摘通りに <script type="text/javascript" src="selectMenu.js"> にしてみたのですが真っ白なページが表示されてしまいます。 <script type="text/javascript" src="selectMenu.txt"> に戻してあげると地名までは表示されるのですが・・ .txt に戻してあるページですが確認していただけますでしょうか。 http://www.tenpo.info/navi/regist_ys.cgi?mode=new

leap_day
ベストアンサー率60% (338/561)

2007/04/08 08:41 回答No.3

こんにちはほよ？コピペしてもう一度確認してみましたけど・・・自分の環境(IE,Opera,Firefox)ではちゃんと表示されてるみたいですけど？で、補足のほうの回答は <form name="FORM1">のほうの</form>と <form name="FORM2">を削除して javascript内の　FORM2 を　FORM1　に変更すればO.K.ですよそうすれば<form name="FORM1">～～</form>内であれば何処でも配置できます

質問者

補足 2007/04/08 09:53

leap_dayさま、やってみたのですが表示されるのは"MENUA" "MENUB"だけです。どこか間違えてしまってるのでしょうか？ htmlには、 print<<""; <html> <head>  <title>新規ホームページ登録</title> <script type="text/javascript" src="selectMenu.txt"></script> <script type="text/javascript">  </script> </head> <body>  # print<<""; <br> <form action="****.cgi" method=post name="FORM2"> ～中略～ <select name="Fkt1" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="Fkt2" > </select> <select name="Fkt3" onchange="setSubMenu1(this.selectedIndex)"> </select> <br> <select name="Fkt4" > </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"}] ]; data1 = [ ["プログラミング", {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"}] ]; としました。お手数とは思いますが確認していただけないでしょうか。

arenani_sorenani
ベストアンサー率73% (58/79)

2007/04/08 07:45 回答No.2

これで・・・・ <html> <head> <title>あ</title> <style type="text/css"> select{ width:100px; } </style> <script type="text/javascript"> data1 = [ ["北海道",{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"}] ]; data2 = [ // [メイン分類,サブ分類並び,…], ["プログラミング", {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"}] ]; window.onload=function (){ for(var i=0; i<data1.length; i++){ document.forms[0].MENUA.options[i] = new Option(data1[i][0],data1[i][0]); } setSubMenu("B",0); for(var i=0; i<data2.length; i++){ document.forms[0].MENUC.options[i] = new Option(data2[i][0],data2[i][0]); } setSubMenu("D",0); } function setSubMenu(sel_str,no){ document.forms[0].elements["MENU"+sel_str].length=0; if(sel_str=="B")data=data1 if(sel_str=="D")data=data2 for(var i=1; i<data[no].length; i++){ document.forms[0].elements["MENU"+sel_str].options[i-1] = new Option(data[no][i].key,data[no][i].value); } } </script> </head> <body> <form> <select name="MENUA" onchange="setSubMenu('B',this.selectedIndex)"></select> <select name="MENUB" ></select> <br> <select name="MENUC" onchange="setSubMenu('D',this.selectedIndex)"></select> <select name="MENUD" ></select> </form> </body> </html> .

質問者

お礼 2007/04/09 03:08

arenani_sorenaniさま、お返事が遅くなりほんとうにすいませんでした。

leap_day
ベストアンサー率60% (338/561)

2007/04/07 09:53 回答No.1

こんにちはなんか見たことあるような・・別の人かな？・・ま、それは置いといて・・・別窓というのがちょっと引っかかってるけど・・・同一ページ内でwindow.onloadを2回読み込んでいるのですか？その場合後のほうMENUCとMENUDだけが表示されてるのではないでしょうか？こういった場合後から読み込んだものが上書きされる形になるので書くなら一緒にしてやればいいですよ <script type="text/javascript">  </script> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu1(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form>

質問者

補足 2007/04/07 14:52

leap_dayさまお返事ありがとうございます。はい、多分他の方だと思います。 leap_dayさまの教えてもらったとおりにやってみたのですが"MENUA" "MENUB" は表示されるのですが"MENUC" "MENUD" はセレクトリストだけ表示されるだけでした。またhtml内 <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu1(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form> の中のFORM1,FORM2をひとまとめにしてセレクトリストだけを別々にする事は出来ないでしょうか？

関連するQ&A

セレクトボックス連動
過去の質問にありましたソースを参考にセレクトボックスの連動タイプを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>
- ベストアンサー
- JavaScript
ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。
上のセレクトメニューから県名を選ぶと、下のセレクトメニューの項目が市区町村の項目になるようにセレクトメニューを連動させたいです。また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですがエラーが出てしまいます。。。 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_13}, {key:"その他市町村",value:02_099}], ["青森", {key:"青森市",value:03_01}, {key:"弘前市",value:03_02}, {key:"八戸市",value:03_03}, {key:"鳥取",value:213}], {key:"その他市町村",value:03_099}], ["岩手県", {key:"盛岡市 ",value:04_01}, {key:"宮古市",value:04_02}, {key:"大船渡市",value:04_03}, {key:"その他市町村",value:04_099}], ["宮城県", {key:"石巻市",value:05_06}, {key:"塩竈市",value:05_07}, {key:"古川市",value:05_08}, {key:"その他市町村",value:05_099}], ]; と書きましたがjavascript初心者でどこに間違いがあるのか解りません・・すみませんがご教授のほどよろしくお願いいたします。
- ベストアンサー
- JavaScript
セレクトメニューの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>
- 締切済み
- JavaScript
２つのコンボボックスの連携
以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <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>
- ベストアンサー
- JavaScript
セレクトメニュー連動のテキストをクリアにしたい
下記のサンプルがあります。 <html> <head> <title>form TEST</title> <script>  </script> </head> <body onLoad="check()"> <form name= "form"> Value１ <select name="one" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value２ <select name="two" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value３ <select name="three" style="visibility:hidden" onchange="txtchg()"> </select> Value４ <textarea name="four" rows="1" cols="10"></textarea> </form> </body> </html> これは、Value1の選択値によってValue3の選択肢を変えて、Value2とValue3の選択値の組み合わせの結果をValue4に記入するという動作のサンプルです。でもこれですと、Value2とValue3の結果でValue４に記入された後に、Value1やValue2を変更した場合、Value3は初期値に戻るのですが、Value4はそのまま表示されたままになってしまいます。本当はValue3が初期値に戻ったのだから、その場合はValue4をクリアにしたいのですが。どこをどう修正すればその動作が可能になるのか、ご教示お願い致します。
- ベストアンサー
- JavaScript
セレクトボックスの連動
セレクトボックスＡを切り替えると、他のセレクトボックスがＡと同じになるようなものを作りたいのですが、うまくいきません。ソースは以下の通りです。 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の時もある、という場合にはどういう風に書けばいいのかわかりません。どのように記述すれば良いのでしょうか。アドバイスお願いします＞＜
- ベストアンサー
- JavaScript
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> ==================================================== 上記のソースで想定の動きをしてくれているのですが、例えば、神奈川県　小田原市と選択し、ブラウザの更新をかけると、神奈川県　渋谷区になってしまいます。ブラウザの更新をかけた際に、双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
セクトボックスの連携の仕方。
こんにちは。過去の質問とか見たのですが、どうしても解決ができなかったので、質問させて下さい。 JavaScriptの部分に <script type="text/javascript">  </script> <script type="text/javascript" >  </script> と記述し、フォームに <form name="form1" method="post" action="tenpo2.php"> <select name="eria" id="eria" onChange="setSubMenu3(this.selectedIndex)"> </select> <select name="tiku" id="tiku"> </select> </form> と書いています。サーバーにアップして動かしてみてるのですが、セレクトボックスに何も表示されません・・・もう何がなんだかって感じなんですが、どうか助けてください。よろしくお願いします。
- ベストアンサー
- JavaScript
複数セレクトメニュー連動の追加・・・その後
2008年の、当サイトでのＱ＆Ａを拝見しまして、fujillinさんのご回答を参考に、プルダウンメニューを作っています。一つの選択肢が１００件以上必要なので、作りましたところ、１００件以上のプルダウンを選択し他後、別の親選択肢を選ぶと、子のデーターに、先程の１００件以上の選択肢が残って表示されてしまいます。大変お手数ですが、javascript初心者なもので、どなたかご教授いただけますと、大変助かります。以下は、fujillinさんオリジナルに、１００件以上のデータを付け加えた、テストコードです。 <html> <head> <script> var sBox=[]; var iData={'全国':'北海道地方,東北地方,関東地方,その他', '北海道地方':'北海道', '東北地方':'青森県,岩手県,宮城県', '関東地方':'茨城県,栃木県,東京都', '北海道':'函館市,札幌市,旭川市', '岩手県':'盛岡市,宮古市,平泉市', '東京都':'23区,武蔵野市,三鷹市,調布市,府中市', '23区':'千代田区,中央区,港区,文京区,新宿区,渋谷区,台東区,墨田区', '千代田区':'旭町,淡路町,飯田橋,内幸町,神田', 'その他':'１＝1,２＝2,３＝3,４＝4,５＝5,６＝6,７＝7,８＝8,９＝9,１０＝10,１１＝11,１２＝12,１３＝13,１４＝14,１５＝15,１６＝16,１７＝17,１８＝18,１９＝19,２０＝20,２１＝21,２２＝22,２３＝23,２４＝24,２５＝25,２６＝26,２７＝27,２８＝28,２９＝29,３０＝30,３１＝31,３２＝32,３３＝33,３４＝34,３５＝35,３６＝36,３７＝37,３８＝38,３９＝39,４０＝40,４１＝41,４２＝42,４３＝43,４４＝44,４５＝45,４６＝46,４７＝47,４８＝48,４９＝49,５０＝50,５１＝51,５２＝52,５３＝53,５４＝54,５５＝55,５６＝56,５７＝57,５８＝58,５９＝59,６０＝60,６１＝61,６２＝62,６３＝63,６４＝64,６５＝65,６６＝66,６７＝67,６８＝68,６９＝69,７０＝70,７１＝71,７２＝72,７３＝73,７４＝74,７５＝75,７６＝76,７７＝77,７８＝78,７９＝79,８０＝80,８１＝81,８２＝82,８３＝83,８４＝84,８５＝85,８６＝86,８７＝87,８８＝88,８９＝89,９０＝90,９１＝91,９２＝92,９３＝93,９４＝94,９５＝95,９６＝96,９７＝97,９８＝98,９９＝99,１００＝100'}; function menu(sel){ for (i=0, seln=-1; i<sBox.length; i++){if (sBox[i]==sel) seln=i;} if (seln>-1){ var selkey=sel.options[sel.selectedIndex].text; if (selkey=='----') selkey=''; if (seln+1<sBox.length) set(seln+1,selkey); } } function set(n,key){ var s=sBox[n]; var dat=[]; for (i=0; i<s.options.length; i++) s.options[0]=null; if (key && iData[key]){ dat=('----,' + iData[key]).split(','); for (i=0; i<dat.length; i++) s.options[i]=new Option(dat[i],s.name+'-'+i); } s.style.visibility=(dat.length)?'visible':'hidden'; if (n+1<sBox.length) set(n+1,''); } window.onload=function(){if (sBox=document.Form1.getElementsByTagName('select')) set(0,'全国');} </script> </head> <body> <form name="Form1" method="POST" action="test.php"> <select name="area" onChange="menu(this)" style="visibility:hidden"></select> <select name="prefecture" onChange="menu(this)" style="visibility:hidden"></select> <select name="city1" onChange="menu(this)" style="visibility:hidden"></select> <select name="city2" onChange="menu(this)" style="visibility:hidden"></select> <select name="city3" onChange="menu(this)" style="visibility:hidden"></select> <p> <input type="reset" value="クリア" onclick="set(0,'全国')"> <input type="submit" value="送信"> </form> </body> </html>
- ベストアンサー
- JavaScript
連動するセレクトボックスの内容を増やしたい
お世話になります。現在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>
- ベストアンサー
- JavaScript

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