• ベストアンサー

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

今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。 説明下手ですみません・・　例えばですけど htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </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"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM2.MENUC.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM2.MENUD.length=0; for(var i=1; i<data[no].length; i++){ document.FORM2.MENUD.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </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"}] ]; と書いたセレクトリストをもう一つ追加したいのです。 が何度やっても上手くいきません。

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答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 こちらはソース文を見られなくする方法なのでちょっと違いますけど『直リンク』とかで検索すると色々出てきます（＾＾） 僕もまだ作成中なので実際に直リンク禁止を試したことは無いので詳しいところは分からないです(新規に質問してみる？)

aiai04
質問者

お礼

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

その他の回答 (4)

  • leap_day
  • ベストアンサー率60% (338/561)
回答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-->"; <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"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM2.Fkt1.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM2.Fkt2.length=0; for(var i=1; i<data[no].length; i++){ document.FORM2.Fkt2.options[i-1] = new Option(data[no][i].key,data[no][i].value); } for(var i=0; i<data1.length; i++){ document.FORM2.Fkt3.options[i] = new Option(data1[i][0],data1[i][0]); } setSubMenu1(0); }; function setSubMenu1(no){ document.FORM2.Fkt4.length=0; for(var i=1; i<data1[no].length; i++){ document.FORM2.Fkt4.options[i-1] = new Option(data1[no][i].key,data1[no][i].value); } } // --> </script> </head> <body> <!--HTML--> #<!--(↓修正不可↓) # (↑修正不可↑)--> print <<"<!--HTML-->"; <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> <!--HTML--> exit; }

aiai04
質問者

補足

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)
回答No.3

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

aiai04
質問者

補足

leap_dayさま、やってみたのですが表示されるのは"MENUA" "MENUB"だけです。 どこか間違えてしまってるのでしょうか？ htmlには、 print<<"<!--HTML-->"; <html> <head> <!-- あ --> <title>新規ホームページ登録</title> <script type="text/javascript" src="selectMenu.txt"></script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM2.Fkt1.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM2.Fkt2.length=0; for(var i=1; i<data[no].length; i++){ document.FORM2.Fkt2.options[i-1] = new Option(data[no][i].key,data [no][i].value); } for(var i=0; i<data1.length; i++){ document.FORM2.Fkt3.options[i] = new Option(data1[i][0],data1[i][0]); } setSubMenu1(0); }; function setSubMenu1(no){ document.FORM2.Fkt4.length=0; for(var i=1; i<data1[no].length; i++){ document.FORM2.Fkt4.options[i-1] = new Option(data1[no][i].key,data1 [no][i].value); } } // --> </script> </head> <body> <!--HTML--> #<!--(↓修正不可↓) # (↑修正不可↑)--> print<<"<!--HTML-->"; <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"}] ]; としました。 お手数とは思いますが確認していただけないでしょうか。

回答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> .

aiai04
質問者

お礼

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

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.1

こんにちは なんか見たことあるような・・別の人かな？・・ま、それは置いといて・・・ 別窓というのがちょっと引っかかってるけど・・・ 同一ページ内でwindow.onloadを2回読み込んでいるのですか？ その場合後のほうMENUCとMENUDだけが表示されてるのではないでしょうか？ こういった場合後から読み込んだものが上書きされる形になるので書くなら一緒にしてやればいいですよ <script type="text/javascript"> <!-- 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"}] ]; window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } for(var i=0; i<data1.length; i++){ document.FORM2.MENUC.options[i] = new Option(data1[i][0],data1[i][0]); } setSubMenu1(0); }; function setSubMenu1(no){ document.FORM2.MENUD.length=0; for(var i=1; i<data1[no].length; i++){ document.FORM2.MENUD.options[i-1] = new Option(data1[no][i].key,data1[no][i].value); } } // --> </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>

aiai04
質問者

補足

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をひとまとめにしてセレクトリストだけを別々にする事は出来ないでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する