複数のプルダウンがうまく表示されない問題について

前へ 次へ
このQ&Aのポイント
  • プルダウンを選択した後、別のプルダウンが正しく表示されません。
  • 1つ目のプルダウンの選択によって2つ目のプルダウンのメニューが異なるのですが、選択を変更した後にメニューが正しく表示されません。
  • 生成したメニューが削除されず、新しく生成されているため、2つのメニューが表示されてしまいます。
回答を見る
  • ベストアンサー

複数のプルダウン

いつも参考にしております。 プルダウンが選択後、もうひとつのプルダウンを表示したいと 思っておりますが、うまく表示されません。 1つめのプルダウンの選択によって、2つめのプルダウンのメニューは 異なります。 <!-- function setArea(n) { 　prefItem = [["▼選択してください"], 　　["▼選択してください", "千葉県", "東京都", "神奈川県", "山梨県"], 　　["▼選択してください", "新潟県", "長野県", "富山県"], 　　["▼選択してください", "静岡県", "愛知県", "岐阜県", "三重県"], 　　len = document.form1.PrefID.options.length; 　　for (i=0; i<len; i++) { 　　　document.form1.PrefID.options[i] = null; 　　} 　　document.form1.PrefID.style.visibility = "visible"; 　　for (i=0; i<prefItem[n].length; i++) { 　　　document.form1.PrefID.options[i] = new Option(prefItem[n][i]); 　　} } //--> <select name="AreaID" onChange="setArea(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">甲信越・北陸</option> <option value="3">東海</option> </select> <select name="PrefID" style="visibility:hidden"> たとえば、1つめのプルダウンを「関東」を選択すると 2つめのプルダウンに「千葉県, 東京都, 神奈川県, 山梨県」 と表示されますが、その後「▼選択してください」を選択すると 「▼選択してください, 神奈川県」と2つのメニューが表示されてしまいます。 メニューを削除して、新しく生成しています。 なので、「▼選択してください」と1つだけのメニューになるはずだと思うのですが。 ご教授お願いいたします。

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

  • ベストアンサー
  • talepanda
  • ベストアンサー率58% (45/77)
回答No.3

やり方は色々あると思いますが、とりあえず。 <html> <head> <script type="text/javascript"> <!-- var area=0; function setArea(n) { area=n; prefItem = [ ["千葉県", "東京都", "神奈川県", "山梨県"], ["新潟県", "長野県", "富山県"], ["静岡県", "愛知県", "岐阜県", "三重県"] ]; len = document.form1.PrefID.options.length; for (i=len-1; i>0; --i)document.form1.PrefID.options[i] = null; if(n!=0){ document.form1.PrefID.style.visibility = "visible"; for (i=0; i<prefItem[n-1].length; i++)document.form1.PrefID.options[i+1] = new Option(prefItem[n-1][i]); } setPref(0); } function setPref(n) { cityItem = [ [["chiba 1", "chiba 2"],["tokyo 1", "tokyo 2"],["kana 1", "kana 2"], ["yama 1", "yama 2"]], [["nigata 1", "nigata 2"],["nagano 1", "nagano 2"],["toyama 1", "toyama 2"]], [["shizu 1", "shizu 2"],["aichi 1", "aichi 2"],["gifu 1", "gifu 2"], ["nakao mie 1", "nakao mie 2"]] ]; len = document.form1.CityID.options.length; for (i=len-1; i>0; --i) document.form1.CityID.options[i] = null; if(n==0)return; document.form1.CityID.style.visibility = "visible"; for (i=0; i<cityItem[area-1][n-1].length; i++) document.form1.CityID.options[i+1] = new Option(cityItem[area-1][n-1][i]); } //--> </script> </head> <body> <form name="form1"> <select name="AreaID" onChange="setArea(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">甲信越・北陸</option> <option value="3">東海</option> </select> <select name="PrefID" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> <select name="CityID" onChange=""><option value="0" selected>▼選択してください</option></select> </form> </body> </html>

wonder_dct
質問者

お礼

for (i=0; i<cityItem[area][n].length; i++) { を以下に変更したら、思っていたように動作いたしました。 for (i=0; i<cityItem[area][n-1].length; i++) { ソース等提示していただき、ありがとうございました。

wonder_dct
質問者

補足

var area = 0; function setArea(n) { 　area = n; 　prefItem = <?= $prefItem ?>; 　len = document.form1.PrefID.options.length; 　for (i=len-1; i>=0; --i) { 　　document.form1.PrefID.options[i] = null; 　} 　if(n != 0) { 　　document.form1.PrefID.style.visibility = "visible"; 　　for (i=0; i<prefItem[n].length; i++) { 　　　document.form1.PrefID.options[i] = new Option(prefItem[n][i], prefItem[n][i]); 　　} 　} 　setPref(0); } function setPref(n) { 　cityItem = <?= $cityItem ?>; 　len = document.form1.CityID.options.length; 　for (i=len-1; i>=0; --i) { 　　document.form1.CityID.options[i] = null; 　} 　if(n == 0) return; 　document.form1.CityID.style.visibility = "visible"; 　for (i=0; i<cityItem[area][n].length; i++) { 　　document.form1.CityID.options[i] = new Option(cityItem[area][n-1][i], cityItem[area][n-1][i]); 　} } 教えていただいたものを参考に上記のようにしていみました。 2つめのプルダウンの1番したのメニューを選択した場合のみ 3つのめのプルダウンにメニューが表示されません。

その他の回答 (2)

  • talepanda
  • ベストアンサー率58% (45/77)
回答No.2

普通に表示されると思いますが、どこかに文法エラーなどがあるのでは？ <html> <head> <script type="text/javascript"> <!-- function setArea(n) { prefItem = [["▼選択してください"], ["▼選択してください", "千葉県", "東京都", "神奈川県", "山梨県"], ["▼選択してください", "新潟県", "長野県", "富山県"], ["▼選択してください", "静岡県", "愛知県", "岐阜県", "三重県"]]; len = document.form1.PrefID.options.length; for (i=len-1; i>=0; --i)document.form1.PrefID.options[i] = null; document.form1.PrefID.style.visibility = "visible"; for (i=0; i<prefItem[n].length; i++)document.form1.PrefID.options[i] = new Option(prefItem[n][i]); } function setPref(n) { cityItem = [["▼選択してください"], ["▼選択してください", "宇都宮市", "足利市"], ["▼選択してください", "千葉市", "千葉市中央区"], ["▼選択してください", "さいたま市", "さいたま市西区", "さいたま市北区"]]; len = document.form1.CityID.options.length; for (i=len-1; i>=0; --i) document.form1.CityID.options[i] = null; document.form1.CityID.style.visibility = "visible"; for (i=0; i<cityItem[n].length; i++) document.form1.CityID.options[i] = new Option(cityItem[n][i],cityItem[n][i]); } //--> </script> </head> <body> <form name="form1"> <select name="AreaID" onChange="setArea(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">甲信越・北陸</option> <option value="3">東海</option> </select> <select name="PrefID" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> <select name="CityID"><option value="0" selected>▼選択してください</option></select> </form> </body> </html>

wonder_dct
質問者

補足

talepandaさん　ありがとうございます。 文法エラーを見つけました。すみませんでした。 ですが、3つのプルダウンメニューが正しく表示されません。 配列は、3次元配列になるのでしょうか？

  • talepanda
  • ベストアンサー率58% (45/77)
回答No.1

for (i=0; i<len; i++) { 　　　document.form1.PrefID.options[i] = null; 　　} を 　　for (i=len-1; i>=0; --i) { 　　　document.form1.PrefID.options[i] = null; 　　}

wonder_dct
質問者

お礼

talepandaさん　ありがとうございます。 ご教授いただいたものでできました。 ありがとうございました。

wonder_dct
質問者

補足

少々話しがずれてしまうのですが・・・ プルダウンが3つになった場合も全く同じようにしているのですが 1つめのプルダウンを選択しても、2つめプルダウンのメニューが 表示されません。 <!-- function setPref(n) { 　cityItem = [["▼選択してください"], 　　["▼選択してください", "宇都宮市", "足利市"], 　　["▼選択してください", "千葉市", "千葉市中央区"], 　　["▼選択してください", "さいたま市", "さいたま市西区", "さいたま市北区"]]; 　len = document.form1.CityID.options.length; 　for (i=len-1; i>=0; --i) { 　　document.form1.CityID.options[i] = null; 　} 　document.form1.CityID.style.visibility = "visible"; 　for (i=0; i<prefItem[n].length; i++) { 　　document.form1.CityID.options[i] = new Option(cityItem[n][i],cityItem[n][i]); 　} } //--> <select name="AreaID" onChange="setArea(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">甲信越・北陸</option> <option value="3">東海</option> </select> <select name="PrefID" onChange="setPref(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> </select> <select name="CityID"> <option value="0" selected>▼選択してください</option> </select> ご教授お願いいたします。

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

関連するQ&A

  • 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>

  • KENT WEBのPostMail内でのjavascript

    KENT WEBのPostMailを利用して作ったフォームメールは正常に出来たのですが、java　scriptを使用したプルダウン項目を貼り付けたところうまく作動しません。(エラーが出ます)具体的には以下の複数プルダウンでの選択絞込み式を入れたいのですが、根本的に無理なのでしょうか？ 又、技術的に不可能な場合、結果的に同じようなPostMailが作れる方法が無いでしょうか？ <html> <head> <script type="text/javascript"> <!-- var area=0; function setArea(n) { area=n; prefItem = [ ["千葉県", "東京都", "神奈川県", "山梨県"], ["新潟県", "長野県", "富山県"], ["静岡県", "愛知県", "岐阜県", "三重県"] ]; len = document.form1.PrefID.options.length; for (i=len-1; i>0; --i)document.form1.PrefID.options[i] = null; if(n!=0){ document.form1.PrefID.style.visibility = "visible"; for (i=0; i<prefItem[n-1].length; i++)document.form1.PrefID.options[i+1] = new Option(prefItem[n-1][i]); } setPref(0); } function setPref(n) { cityItem = [ [["chiba 1", "chiba 2"],["tokyo 1", "tokyo 2"],["kana 1", "kana 2"], ["yama 1", "yama 2"]], [["nigata 1", "nigata 2"],["nagano 1", "nagano 2"],["toyama 1", "toyama 2"]], [["shizu 1", "shizu 2"],["aichi 1", "aichi 2"],["gifu 1", "gifu 2"], ["nakao mie 1", "nakao mie 2"]] ]; len = document.form1.CityID.options.length; for (i=len-1; i>0; --i) document.form1.CityID.options[i] = null; if(n==0)return; document.form1.CityID.style.visibility = "visible"; for (i=0; i<cityItem[area-1][n-1].length; i++) document.form1.CityID.options[i+1] = new Option(cityItem[area-1][n-1][i]); } //--> </script> </head> <body> <form name="form1"> <select name="AreaID" onChange="setArea(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">甲信越・北陸</option> <option value="3">東海</option> </select> <select name="PrefID" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> <select name="CityID" onChange=""><option value="0" selected>▼選択してください</option></select> </form> </body> </html>

    • ベストアンサー
    • 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="Ａブロック">Ａブロック</OPTION> <OPTION value="Ｂブロック">Ｂブロック</OPTION> <OPTION value="Ｃブロック">Ｃブロック</OPTION> <OPTION value="Ｄブロック">Ｄブロック</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; }

  • 複数のプルダウンメニューの作り方。

    ・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。

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

    「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。 しかし、「ブロック名」を「Ａブロック」選択しても「部署名」が「Ｂトップ～」が出てしまいます。 何がおかしいのか分からないので、ぜひ教えてください。 よろしくお願いいたします。 menuItem = [　　["Ａトップ","A本部","B本部","C本部"], ["Ｂトップ","1本部","2本部","3本部"], ["Ｃトップ","あ本部","い本部","う本部"], 　　　　　　　　["Ｄトップ","●本部","▲本部","◆本部"] ]; 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>

  • セレクトメニューの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>

  • プルダウンを2個選び、その結果に基づき、値を返す。

    プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。

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

    どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 ネットで探した方法で、セレクトメニュー１の項目を選択したときにセレクトメニュー２の項目を変化させる制御をしています。 このフォームでDBにvalue値（1,2など数値で）を送信するようにしたいのですが この方法ですとセレクトメニュー２のvalue値が0（NULL）となってしまい上手く送信できません。 配列に文字列を入れていますし、DBの型をintにしているので0になってしまっていると思うのですが、 文字列としては送信したくはありません。 どのような方法でしたら文字列ではなく、上手くvalueに数値を入れることが出来るでしょうか。 どうかよろしくおねがいします。 以下使用しているコードです。 <html> <head> <title>テストテスト</title> <script language="JavaScript"><!-- menuItem = [ [], ["あああ","あああ２","あああ３","あああ４","あああ５"], ["いいい"], ["ううう","ううう２"], ["えええ","えええ２","えええ３","えええ４"] ]; 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> <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"> 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を使ったセレクトメニュー連動について教えてください <BODY> <script language="JavaScript"> <!-- menuItem = [["--------"], ["北海道"], ["青森県","岩手県","宮城県","秋田県","山形県","福島県"], ["茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県"], ["新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県"], ["三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県"], ["鳥取県","島根県","岡山県","広島県","山口県"], ["徳島県","香川県","愛媛県","高知県"]] menuval = [["dammy"], ["1-1"], ["2-1"], ["3-1","3-2","3-3","3-4","3-5","3-6","3-7"], ["4-1","4-2","4-3","4-4","4-5","4-6","4-7","4-8","4-9"], ["5-1","5-2","5-3","5-4","5-5","5-6","5-7"], ["6-1","6-2","6-3","6-4","6-5"], ["7-1","7-2","7-3","7-4"]] function setMenu(n){ itemNum = menuItem[n].length; document.myForm.Computer.length = itemNum; for (i=0; i<itemNum; i++) { document.myForm.Computer.options[i] = new Option(menuItem[n][i],menuval[n][i]); } document.myForm.Computer.style.visibility = "visible"; } // --> </script> <form name="myForm" method="POST" action="test.php" enctype="multipart/form-data" accept-charset="UTF-8"> <select name="Maker" onChange="setMenu(this.selectedIndex)"> <option value="dammy">--------</option> <option value="omosiro">北海道地方</option> <option value="syougeki">東北地方</option> <option value="cinema">関東地方</option> <option value="game">中部地方</option> <option value="music">近畿地方</option> <option value="sports">中国地方</option> <option value="car">四国地方</option> </select> <select name="Computer" style="visibility:hidden"> <option value="dammy">--------</option> </select> <br> <input type="reset" value="全ての入力をやり直す" onclick="location.reload()"> <INPUT type="submit" value="phpファイルにフォームからの入力データを渡す"> </form> </BODY> 現在2つのセレクトメニュー連動まではできたのですが、さらにもう１段階追加しようとしてつまずいています。 まず１段階目のセレクトメニューで「東北地方」を選択したら、「青森県」「岩手県」などが右に新たなセレクトメニューとして出てきます。 その中からたとえば、「岩手県」を選択したら次に（つまり右側に）新たに「盛岡市」「宮古市」「平泉町」などが新たにセレクトメニューとして表示されるようにしたいのですがどうもうまくいきません ３段階目のセレクトメニューもうまく表示させる方法はないでしょうか。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する