• 締切済み

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

いつも参考にさせて頂いております。 javascript初心者です。 現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。 一つ目のセレクトで、地域の選択 二つ目のセレクトで、県の選択 三つ目のセレクトで、「プレイスポット」か「食事」の選択 四つ目のセレクトでは、 プレイスポット名(三つ目でプレイスポット選択時) お店名(三つ目で食事選択時) 上記したようにしたいのです。宜しくお願いします。 <html> <head> <script type="text/javascript"> <!-- var area=0; function setA(n) { aa=n; data1 = [ ["東京","神奈川"], ["大阪","神戸"], ]; len = document.form1.box_a.options.length; for(i=len-1; i>0; --i) document.form1.box_a.options[i] = null; if(n!=0) { document.form1.box_a.style.visibility = "visible"; for(i=0; i<data1[n-1].length; i++) document.form1.box_a.options[i+1] = new Option(data1[n-1][i]); } setB(0); } function setB(n) { data2 = [ [["プレイスポット","食事"],["プレイスポット","食事"]], [["プレイスポット","食事"],["プレイスポット","食事"]] ]; len = document.form1.box_b.options.length; for(i=len-1; i>0; --i) document.form1.box_b.options[i] = null; if(n==0)return; document.form1.box_b.style.visibility = "visible"; for(i=0; i<data2[aa-1][n-1].length; i++) document.form1.box_b.options[i+1] = new Option(data2[aa-1][n-1][i]); setC(0); } function setC(n) { data3 = [ [[["としまえん","よみうりランド"],["キハチ","久兵衛"]]], [[["江ノ島","鎌倉"],["カレーミュージアム","中華街"]]], [[["ユニバーサルスタジオ","天王寺動物園"],["かに道楽","金龍ラーメン"]]], [[["須磨海浜水族園","グリコピア"],["コンチェルト","六甲山牧場"]]] ]; len = document.form1.box_c.options.length; for(i=len-1; i>0; --i) document.form1.box_c.options[i] = null; if(n==0)return; document.form1.box_c.style.visibility = "visible"; for(i=0; i<data3[aa-1][n-1][n-1].length; i++) document.form1.box_c.options[i+1] = new Option(data3[aa-1][n-1][n-1][i]); } //--> </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>

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.4

データ構造がわかりにくい・・・ 最終的に必要なのは4番目のセレクトメニューだけですよね? ならいっそのことこんなかんじでどうでしょ? <html> <head> <style> select{ width:150px; } </style> <script> var data={ 関東:{ 東京:{ プレイスポット:{0:"としまえん",1:"よみうりランド"} ,食事:{0:"キハチ",1:"久兵衛"} } ,神奈川:{ プレイスポット:{0:"江ノ島",1:"鎌倉"} ,食事:{0:"カレーミュージアム",1:"中華街"} } } ,関西:{ 大阪:{ プレイスポット:{0:"ユニバーサルスタジオ",1:"天王寺動物園"} ,食事:{0:"かに道楽",1:"金龍ラーメン"} } ,神戸:{ プレイスポット:{0:"須磨海浜水族園",1:"グリコピア"} ,食事:{0:"コンチェルト",1:"六甲山牧場"} } } }; window.onload=function(){ s0=document.getElementById("s0"); s1=document.getElementById("s1"); s2=document.getElementById("s2"); s3=document.getElementById("s3"); setSelect(data,s0); s0.onchange=function(){ clearSelect(s2); clearSelect(s3); if(this.value==""){ clearSelect(s1); }else{ setSelect(data[this.value],s1); } } s1.onchange=function(){ clearSelect(s3); if(this.value==""){ clearSelect(s2); }else{ setSelect(data[s0.value][this.value],s2); } } s2.onchange=function(){ if(this.value==""){ clearSelect(s3); }else{ setSelect(data[s0.value][s1.value][this.value],s3); } } } function setSelect(obj,sel){ while(lc=sel.lastChild){ sel.removeChild(lc); }; var op=document.createElement("option"); op.setAttribute("value",""); op.appendChild(document.createTextNode("▼選択してください")); sel.appendChild(op); for(var i in obj){ var txt=(typeof obj[i]=="object")?i:obj[i]; var op=document.createElement("option"); op.setAttribute("value",i); op.appendChild(document.createTextNode(txt)); sel.appendChild(op); } } function clearSelect(sel){ while(lc=sel.lastChild){ sel.removeChild(lc); }; var op=document.createElement("option"); op.appendChild(document.createTextNode("---------------")); sel.appendChild(op); }; </script> </head> <body> <form id="f0"> <select id="s0"> <option value="">▼選択してください</option> </select> <select id="s1"> <option value="">---------------</option> </select> <select id="s2"> <option value="">---------------</option> </select> <select id="s3" name="place"> <option value="">---------------</option> </select> </form> </body> </html>

menta2000
質問者

お礼

回答ありがとうございます。 すごく参考になります。 ありがとうございました。 では、失礼します。

  • auty
  • ベストアンサー率58% (284/486)
回答No.3

「訂正」最後のfor文も同じくbbを使います。今は数が同じだからそのままでも動きました。 for(i=0; i<data3[aa-1][bb-1][n-1].length; i++)

  • auty
  • ベストアンサー率58% (284/486)
回答No.2

・ 配列がむやみに複雑になっていて改良の余地があると思いますが、とりあえず修正点を挙げてみます。 ・ setA(n)のaa=n;と同じように、setB(n)にbb=n; を加えます。それを、setC(n)の document.form1.box_c.options[i+1] = new Option(data3[aa-1][bb-1][n-1][i]); で利用します。 ・ 配列data3の構造を変えます。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ function setB(n) { bb=n; data2 = ------------------------------------------------------------ function setC(n) { data3 = [ [ [["としまえん","よみうりランド"],["キハチ","久兵衛"]], [["江ノ島","鎌倉"],["カレーミュージアム","中華街"]] ], [ [["ユニバーサルスタジオ","天王寺動物園"],["かに道楽","金龍ラーメン"]], [["須磨海浜水族園","グリコピア"],["コンチェルト","六甲山牧場"]] ] ]; len = document.form1.box_c.options.length; for(i=len-1; i>0; --i) document.form1.box_c.options[i] = null; if(n==0)return; document.form1.box_c.style.visibility = "visible"; for(i=0; i<data3[aa-1][n-1][n-1].length; i++) document.form1.box_c.options[i+1] = new Option(data3[aa-1][bb-1][n-1][i]); }

menta2000
質問者

お礼

回答ありがとうございます。 理想のものになりました!! 本当に助かりました。 では、失礼します。

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

> [[["としまえん","よみうりランド"],["キハチ","久兵衛"]]], なんで二重に括られているのかがよくわからないんだけど・・・? []が ひと組余分に見えるのは気のせい?

menta2000
質問者

お礼

ご指摘ありがとうございます。 初心者でよくわかってませんでした。 もっと理解してきます。

関連するQ&A

  • セレクトメニュー連動のテキストをクリアにしたい

    下記のサンプルがあります。 <html> <head> <title>form TEST</title> <script> <!-- menuItem = [["-選んで下さい-","いち","に","さん"], ["-選んで下さい-","ひい","ふう","み"], ["-選んで下さい-","もの","じ","とり"]]; function check(){ len = document.form.three.options.length; for (i=0; i<len; i++){ document.form.three.options[i] = null; } n = document.form.one.value; if(n == "1"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[0].length; i++){ document.form.three.options[i] = new Option(menuItem[0][i],menuItem[0][i]); } }else if(n == "2"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[1].length; i++){ document.form.three.options[i] = new Option(menuItem[1][i],menuItem[1][i]); } }else if(n == "3"){document.form.three.style.visibility = "visible"; for (i=0; i<menuItem[2].length; i++){ document.form.three.options[i] = new Option(menuItem[2][i],menuItem[2][i]); } } } msgtxt = new Array(); for (i=0; i<3; i++){msgtxt[i] = new Array(); } msgtxt[0][0] =" "; msgtxt[0][1] ="あいうえお"; msgtxt[0][2] ="かきくけこ"; msgtxt[0][3] ="さしすせそ"; msgtxt[1][0] =" "; msgtxt[1][1] ="たちつてと"; msgtxt[1][2] ="なにぬねの"; msgtxt[1][3] ="はひふへほ"; msgtxt[2][0] =" "; msgtxt[2][1] ="まみむめも"; msgtxt[2][2] ="やゆよ"; msgtxt[2][3] ="わゐうゑを"; function txtchg(){ x = document.form.two.selectedIndex; y = document.form.three.selectedIndex; document.form.four.value = msgtxt[x][y]; } // --> </script> </head> <body onLoad="check()"> <form name= "form"> Value1 <select name="one" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value2 <select name="two" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value3 <select name="three" style="visibility:hidden" onchange="txtchg()"> </select> Value4 <textarea name="four" rows="1" cols="10"></textarea> </form> </body> </html> これは、Value1の選択値によってValue3の選択肢を変えて、Value2とValue3の選択値の組み合わせの結果をValue4に記入するという動作のサンプルです。 でもこれですと、Value2とValue3の結果でValue4に記入された後に、Value1やValue2を変更した場合、Value3は初期値に戻るのですが、Value4はそのまま表示されたままになってしまいます。本当はValue3が初期値に戻ったのだから、その場合はValue4をクリアにしたいのですが。 どこをどう修正すればその動作が可能になるのか、ご教示お願い致します。

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

    [セレクトメニューA] > [セレクトメニューB] > [セレクトメニューC] …というような、まずAで選び、それに対応したメニューBのうちのひとつを選び、そして最後にCのうちのひとつを選ぶと、 (たとえば、Cのセレクトメニューには Yahoo Google Excite のようなのがあり、それらを選択すると、) あらかじめ設定しておいた該当するページへ行く、というようなしくみはどのように作ればいいのでしょうか? ネット上を探し回って、自分で組み立てて作ってみましたが、 <!-- menu = [  ["A","B","C","D"],  ["E","F","G"],  ["H"] ]; function setMenu(n) { len = document.myForm.sb.options.length; for (i=len-1; i>=0; i--) { document.myForm.sb.options[i] = null; } for (i=0; i<menu[n].length; i++) { document.myForm.sb.options[i] = new Option(menu[n][i],menu[n][i]); } } menuItem = [  ["Z"],  ["Y","X","W","V"],  ["U","T","S","R"] ]; function setMenuItem(a) { len = document.myForm.s.options.length; for (c=len-1; c>=0; c--) { document.myForm.s.options[c] = null; } for (c=0; c<menuItem[a].length; c++) { document.myForm.s.options[c] = new Option(menuItem[a][c],menuItem[a][c]); } } // --> ───────────────── <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> &gt; <select name="sb" onchange="setMenuItem(this.selectedIndex)"> <option selected> </option> </select>&nbsp;&gt; <select name="s" onChange="popJump(this)"> <option selected > </option> </select> </form> …と、3つを連動させるまでにはいたったのですが、最後の、「セレクトCを選んだときに該当ページへジャンプ」というのができません。 このプログラムにどのような修正を加えればよいのでしょうか? よろしくお願いいたします。

  • セレクトメニュー選択でもう一つセレクトメニューを出す

    「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。 しかし、「ブロック名」を「Aブロック」選択しても「部署名」が「Bトップ~」が出てしまいます。 何がおかしいのか分からないので、ぜひ教えてください。 よろしくお願いいたします。 menuItem = [  ["Aトップ","A本部","B本部","C本部"], ["Bトップ","1本部","2本部","3本部"], ["Cトップ","あ本部","い本部","う本部"],         ["Dトップ","●本部","▲本部","◆本部"] ]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------------------- <SELECT size="1" name="Block" onChange="setMenuItem(this.selectedIndex)"> <OPTION selected value="0">選択してください</OPTION> <OPTION value="a-block">Aブロック</OPTION> <OPTION value="b-block">Bブロック</OPTION> <OPTION value="c-block">Cブロック</OPTION> <OPTION value="d-block">Dブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="visibility:hidden"> <OPTION selected value="0">選択してください</OPTION> </SELECT>

  • セレクトボックス連動

    過去の質問にありましたソースを参考にセレクトボックスの 連動タイプを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"> <!-- data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; // --> </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> <select name="menub" > </select> </form> </body> </html>

  • セレクトメニューからもう一つのセレクトメニューを選択したか確認

    「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしました。 送信前に「ブロック名」だけでなく、「部署名」も選択したかそうか確認したのですが、どうしでも出来ません。 いろいろ試しても出来なくて困っています。 ぜひ教えてください。 よろしくお願いいたします。 ---------------------------------------------------------------- menuItem =[[" "], ["(2) 部署を選択 ","あああ","いいい"],      ["(2) 部署を選択 ","ううう","えええ"], ["(2) 部署を選択 ","おおお","かかか"],      ["(2) 部署を選択 ","ききき","くくく"]]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------- <SELECT size="1" name="AREA" onchange="setMenuItem(this.selectedIndex)" style="color : #3d3d3d;"> <OPTION value="0" selected>(1) ブロックを選択 </OPTION> <OPTION value="Aブロック">Aブロック</OPTION> <OPTION value="Bブロック">Bブロック</OPTION> <OPTION value="Cブロック">Cブロック</OPTION> <OPTION value="Dブロック">Dブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="color : #3d3d3d;visibility : hidden;"> <OPTION selected value="0"></OPTION> </SELECT> ---------------------------------------------------------------- 確認用 if(document.form2.AREA.value=="0"){ alert("ブロックを選択してください"); return false; } return true; }

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

    どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 ネットで探した方法で、セレクトメニュー1の項目を選択したときにセレクトメニュー2の項目を変化させる制御をしています。 このフォームでDBにvalue値(1,2など数値で)を送信するようにしたいのですが この方法ですとセレクトメニュー2のvalue値が0(NULL)となってしまい上手く送信できません。 配列に文字列を入れていますし、DBの型をintにしているので0になってしまっていると思うのですが、 文字列としては送信したくはありません。 どのような方法でしたら文字列ではなく、上手くvalueに数値を入れることが出来るでしょうか。 どうかよろしくおねがいします。 以下使用しているコードです。 <html> <head> <title>テストテスト</title> <script language="JavaScript"><!-- menuItem = [ [], ["あああ","あああ2","あああ3","あああ4","あああ5"], ["いいい"], ["ううう","ううう2"], ["えええ","えええ2","えええ3","えええ4"] ]; function clearOption(len){ var i; for (i=0; i<len; i++){ document.aaa.bbb.options[i] = null; } } function setMenuItem(n){ optlen = document.aaa.bbb.options.length; while(optlen > 0){ clearOption(optlen); optlen = document.aaa.bbb.options.length; } if (menuItem[n].length > 0){ for (i=0; i<menuItem[n].length; i++){ document.aaa.bbb.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } } // --></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>

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

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

  • ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。

    上のセレクトメニューから県名を選ぶと、下のセレクトメニューの項目が市区町村の項目になるようにセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですがエラーが出てしまいます。。。 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_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初心者でどこに間違いがあるのか解りません・・ すみませんがご教授のほどよろしくお願いいたします。

  • 2つのプルダウンを連動させて、selectedで選択状態にしたい

    JavaScript初心者です。 今、phpとMySQLとJavaScriptで車の情報を登録する画面を作っています。 1つのプルダウンが選択後、もうひとつのプルダウンを表示するのですが、 入力画面から確認画面へ移って、history.backでもう一度入力画面にもどったときに、 選択された状態で表示したいのです。 下記のmakerは、値をセッションで受け取り、selectedをつける指示を したので、 選択状態にすることができました。 もう一つのcarnameがどうしたらよいか分かりません。 どうかご教授お願い致します。 <head> <script type="text/javascript"> <!-- var area=0; function setArea(n) { area=n; carnameItem = [ //トヨタ ['カローラ','クラウン','セルシオ'], //ニッサン ['シーマ','エルグランド','ローレル'], len = document.form1.carname.options.length; for (i=len-1; i>0; --i)document.form1.carname.options[i] = null; if(n!=0){ document.form1.carname.style.visibility = "visible"; for (i=0; i<carnameItem[n-1].length; i++)document.form1.carname.options[i+1] = new Option(carnameItem[n-1][i]); } setPref(0); } //--> </script> </head> <body> <form name="form1"> <select name="maker" onChange="setArea(this.selectedIndex)"> <option value="0"<?php echo $selected1?>>▼選択してください</option> <option value="1"<?php echo $selected1?>>トヨタ</option> <option value="2"<?php echo $selected2?>>ニッサン</option> </select> <select name="carname" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> </form>

  • セレクトボックスの連動

    セレクトボックスAを切り替えると、他のセレクトボックスがAと同じになるようなものを作りたいのですが、うまくいきません。 ソースは以下の通りです。 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の時もある、という場合にはどういう風に書けばいいのかわかりません。 どのように記述すれば良いのでしょうか。アドバイスお願いします><