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

2023/09/05 23:36

このQ&Aのポイント

セレクトメニュー連動のテキストをクリアする方法について教えてください。
Value1の選択値によってValue3の選択肢を変え、Value2とValue3の選択値の組み合わせでValue4に記入する動作を実現できました。しかし、Value1やValue2を変更した場合に、Value4がそのまま表示されたままになってしまいます。初期値に戻った場合にValue4をクリアする方法を教えてください。
Value1やValue2を変更した際にValue4をクリアする方法について教えてください。

ベストアンサー

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

2015/02/01 23:03

下記のサンプルがあります。 <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をクリアにしたいのですが。どこをどう修正すればその動作が可能になるのか、ご教示お願い致します。

hage_1000
お礼率89% (34/38)

JavaScript
回答数1
ありがとう数1

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

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

ベストアンサー

sanzero
ベストアンサー率56% (58/102)

2015/02/02 01:49 回答No.1

check()メソッドの最初に document.form.four.value = ""; を入れてみてください。 ※変数を宣言するときは最初の変数名の前にvarをつけましょう。 ex) var len = document.form.three.options.length;

質問者

お礼 2015/02/02 11:37

ありがとうございます。実行させる時に、「初期値に戻してから実行」とさせればよかったのですね。助かりました。

関連するQ&A

セレクトメニューの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
セレクトメニュー選択でもう一つセレクトメニューを出す
「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。しかし、「ブロック名」を「Ａブロック」選択しても「部署名」が「Ｂトップ～」が出てしまいます。何がおかしいのか分からないので、ぜひ教えてください。よろしくお願いいたします。 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>
- ベストアンサー
- JavaScript
セレクトメニューからもう一つのセレクトメニューを選択したか確認
「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしました。送信前に「ブロック名」だけでなく、「部署名」も選択したかそうか確認したのですが、どうしでも出来ません。いろいろ試しても出来なくて困っています。ぜひ教えてください。よろしくお願いいたします。 ---------------------------------------------------------------- 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; }
- 締切済み
- JavaScript
セレクトメニューの連動、そしてページへのリンク
[セレクトメニュー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を選んだときに該当ページへジャンプ」というのができません。このプログラムにどのような修正を加えればよいのでしょうか？よろしくお願いいたします。
- ベストアンサー
- JavaScript
１つの条件式で同時に２つの動作をさせたい
お世話になります。１つの条件式で同時に２つの動作をさせるためには、どのように記述すれば良いのでしょうか？例として if(str == 1){document.form.A.style.visibility = "visible"; for (i=0; i<menuItem[0].length; i++) { document.form.A.options[i] = new Option(menuItem[0][i],menuItem[0][i]); } ｝と言う、セレクトメニューを表示して任意の選択valueを組み込む記述があります。これに、同じ条件の時(str == 1)に、同時にもう１つの別の場所のセレクトメニュー {document.form.B.style.visibility = "visible"; for (i=0; i<menuItem[1].length; i++) { document.form.B.options[i] = new Option(menuItem[1][i],menuItem[1][i]); } } の表示・選択valueの変更をさせたいのですが、どのような記述にしたらよろしいのでしょうか？よろしくお願い致します。
- ベストアンサー
- JavaScript
複数のセレクトメニューを制御するとき・・・
どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。ネットで探した方法で、セレクトメニュー１の項目を選択したときにセレクトメニュー２の項目を変化させる制御をしています。このフォームで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>
- ベストアンサー
- JavaScript
セレクトボックス連動
過去の質問にありましたソースを参考にセレクトボックスの連動タイプを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
複数セレクトメニュー連動の追加の仕方について、教えてください
こんにちは、javascriptを使ったセレクトメニュー連動について教えてください <BODY> <script language="JavaScript">  </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つのセレクトメニュー連動まではできたのですが、さらにもう１段階追加しようとしてつまずいています。まず１段階目のセレクトメニューで「東北地方」を選択したら、「青森県」「岩手県」などが右に新たなセレクトメニューとして出てきます。その中からたとえば、「岩手県」を選択したら次に（つまり右側に）新たに「盛岡市」「宮古市」「平泉町」などが新たにセレクトメニューとして表示されるようにしたいのですがどうもうまくいきません３段階目のセレクトメニューもうまく表示させる方法はないでしょうか。よろしくお願いします。
- ベストアンサー
- 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_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"}] ]; と書いたセレクトリストをもう一つ追加したいのです。が何度やっても上手くいきません。
- ベストアンサー
- 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