javascriptでの2つのプルダウンメニューの初期値
- javascriptを使用して2つの連動するプルダウンメニューを作成しましたが、初期表示時に2つ目のメニューが空白のまま表示されてしまいます。
- ブラウザの戻るボタンで戻っても2つ目のメニューが空白のままになります。
- どのようにすれば2つ目のメニューを選択しなくても初期表示時に値が選択された状態になるのでしょうか？
- ベストアンサー
javascriptでの2つのプルダウンメニューの初期値
下記の2つの連動するセレクトメニューで最初の国名のプルダウンで「日本」を選択、次の都市名のプルダウンで「東京」を選択し、 その後ブラウザの戻るボタンで戻り後、再びページを表示させたり、または入力内容確認画面へ進みjavascriptのonclick="history.back()"で入力ページ（下記スクリプト記述ページ）に戻ると1つ目の国名のメニューは日本が表示されていますが、2つ目の都市名のメニューが空白になってしまいます。 そのため、都市名のプルダウンで東京を表示させるには、1つ目の国名のプルダウンを一度日本以外にしてから再度日本に表示させるといった動作が必要になってしまっています。 そこで、都市名のメニューを空白にさせずにそのまま表示させるように色々調べたのですが、解決策がありませんでした。 そこで、せめて両方のプルダウンともに「国を選択して下さい」にした状態にはできないかと考えております。 何か良い方法がありましたらば教えて頂けませんでしょうか？ <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [ ["国名を選択してください,"], ["東京,tokyo","大阪,osaka","名古屋,nagoya"], ["ニューヨーク,ny","ロサンゼルス,la"] ]; var i, tmp = []; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ tmp = optionData[selNo][i].split(","); selObj.options[i] = new Option(tmp[0], tmp[1]); } } } </script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="" selected>国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub"> <option value="">国を選択してください</option> </select> </form> </body> </html>
- cgicold
- お礼率93% (15/16)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
フォームの値は通常ならブラウザが記憶しているのですが、 「都市の選択」の方はロード時（JSで動的に追加する前）のoptionが1つしかないし、 そうでなくても動的にoptionを全部消しているし、 optionの値を書き換えただけでもリセットされるようなので、 cookieを使うしか方法はなさそうです。
その他の回答 (1)
- imq
- ベストアンサー率72% (16/22)
wondow.onloadの時にもonchangeの内容を実行すればいいと思います。 ↓一例ですが window.onload = function(){ var e, l; (l = function(el) { var selNo = el.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [ ["国名を選択してください,"], ["東京,tokyo","大阪,osaka","名古屋,nagoya"], ["ニューヨーク,ny","ロサンゼルス,la"] ]; var i, tmp = []; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ tmp = optionData[selNo][i].split(","); selObj.options[i] = new Option(tmp[0], tmp[1]); } })(e = document.getElementById("selMain")); e.onchange = function() { l(this); }; }
お礼
ありがとうございます 教えて頂いた方法で希望通りの動作ができるようになりました！ ブラウザの戻るで戻ったり、onclick="history.back()"で入力画面に戻っても国名、都市名のプルダウンともに空白になることなく表示されました。 １点、教えて頂きたいのですが、onclick="history.back()"などで戻った場合、国名のプルダウンは先に選択した項目が表示されますが、都市名のプルダウンは一番上の都市（日本ならば東京、アメリカならニューヨーク）が表示されます。 これを国名のプルダウン同様に選択していたものを表示させることが可能なようならば、教えて頂けませんでしょうか？
関連するQ&A
- JavaScriptのプルダウン
プルダウンメニューの中から選択したページへジャンプするようにしたいのですがわからないところがあるので教えてください。 TOPページはframesetでmenu、TOP2の上下に分かれています。プルダウンメニューはmenuのページに置き、選択したページを表示するのは下のTOP2の部分に表示させたいんです。 下記のように記述したのですがこのままだとジャンプしたページはmenuに表示されてしまいます。 －－－－－－－－－－－－－－－－－－－－ <script Language="JavaScript"> <!-- function popJump(selOBJ) { n = selOBJ.selectedIndex; location.href = selOBJ.options[n].value; } // --> </script> </head> <body> <form> <select onChange="popJump(this)"> <option value="#">選択して下さい <option value="top2.htm">トップページ <option value="A.htm">A <option value="B.htm">B </select> </form> －－－－－－－－－－－－－－－－－－－－ <option value="A.htm">のところでTOP2へジャンプするように指定するのだと思うのですが その方法がいろいろ調べてみたのですがわかりません。 わかる方、アドバイスをお願いします。
- ベストアンサー
- JavaScript
- セレクトメニューで選択された項目に応じて、別のセレクトメニューの内容を変更する場合について
アドバイスお願いします。 ページロード時、最初ののセレクトメニューは「国を選択してください」が選択された状態となりますが、次のセレクトメニューが空白になってしまいます。 これを最初のメニューと同じく「国を選択してください」と表示させるには、どうしたらよろしいでしょうか？ 【HTML】 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>JavaScript</title> <link rel="stylesheet" type="text/css" href="main.css" media="all"> <script type="text/javascript" src="main.js"></script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="">国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub">国を選択してください</select> </form> </body> </html> 【main.js】 window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [[ ],[ { text:"東京", value:"tokyo"}, { text:"大阪", value:"osaka"}, { text:"名古屋", value:"nagoya"} ],[ { text:"ニューヨーク", value:"ny"}, { text:"ロサンゼルス", value:"la"} ] ]; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ selObj.options[i] = new Option(optionData[selNo][i].text, optionData[selNo][i].value); } } } また、質問にありますようなセレクトメニューを実装する場合、JavaScriptとAJAX、どちらが適したものと言えるのでしょうか？
- ベストアンサー
- JavaScript
- ホームページでJavascriptを使ったプルダウンメニューによる画面切替え
ホームページでiframe内のページをプルダウンメニューを変更したいのですが、アンカーポイントでのプルダウンメニューのリンクではホームページを代える事は出来ないのですか？ プルダウンメニューを行うとJavascriptエラーが起きて画面がリンク先になりません。 ○Javascriptの文 <SCRIPT language=JavaScript type=text/JavaScript> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } //--> </SCRIPT> ○iframeの文 <iframe src="report.html" name=if width="440" height="500" frameborder="0">iframeを使用しております。<br></iframe> ○プルダウンメニューの文 <FORM name=form1> <SELECT onchange="MM_jumpMenu('parent.frames[\'if\']',this,0)" name=menu1> <option value="report.html\#0008" selected>第８回目</option> <option value="report.html\#0007">第７回目</option> <option value="report.html#0006">第６回目</option> <option value="report.html#0005">第５回目</option> <option value="report.html#0004">第４回目</option> <option value="report.html#0003">第３回目</option> <option value="report.html#0002">第２回目</option> <option value="report.html#0001">第１回目</option> </select> </form> どこが悪いのか教えてください。分かる方いらっしゃいますか？ 教えてください、お願いいたします。
- 締切済み
- JavaScript
- Javascript
Javascript に関する質問です。 HTML にプルダウンメニューを設置し各ページに飛ばす際に、 別ウィンドウを開かせるようにするにはどうすればよいのでしょうか？ 下記は Dreamweaver MX がはき出した Javascript です。 当方 Javascript に関してはほとんど素人です。どこに何を、どう書き換えてやればいいのか、どうか教えてください。 【Javascript】 <script language="JavaScript" type="text/JavaScript"> function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } </script> 【HTML側】 <select onchange="MM_jumpMenu('parent',this,0)" name=menu1> <option selected>-- 選択して下さい --</option> <option value="../1.html">home1</option> <option value="../2.html">home2</option> <option value="../3.html">home3</option> <option value="../4.html">home4</option> </select>
- 締切済み
- JavaScript
- フレームを使ったプルダウンメニュー
フレームで「ヘッダー・左メニュー・右メインページ」というように３分割にし、左メニューに置いたプルダウンから項目を選ぶと右メインに表示される、という構造にしたいと思っています。 <HEAD>～</HEAD>内↓ <script language="JavaScript"> function jump(form) { var myindex=form.destination.selectedIndex window.open(form.destination.options[myindex].value, target="main"); } //--> </SCRIPT> プルダウン部分↓ <FORM NAME="form"> <SELECT NAME="destination"> <OPTION VALUE="a.html" SELECTED>あ</OPTION> <OPTION VALUE="k.html">か</OPTION> <OPTION VALUE="s.html">さ</OPTION> <OPTION VALUE="t.html">た</OPTION> <OPTION VALUE="n.html">な</OPTION> </SELECT> <INPUT TYPE="image" SRC="go.gif" onClick="jump(this.form)" BORDER="0"> </FORM> という様に記述した所、例えばプルダウンで「た」を選択した場合、右フレームにちゃんとt.htmlが表示されるのですが、左フレームのプルダウンの項目が「あ」に戻ってしまいます。「た」を選択した状態のまま残したいのですが。 ちなみにボタンに画像を使わず、<INPUT TYPE="button" ・・・・>にするとなぜか「た」選択の状態でちゃんと残ります。でも、できれば画像を使いたいのです。 うまいやり方をご存じの方は、教えていただけますか。おねがいします。
- ベストアンサー
- JavaScript
- javascriptを活用して、プルダウンメニューにて選択、登録された
javascriptを活用して、プルダウンメニューにて選択、登録された値は上部に表示及びhiddenに値を代入したいのですが、いまいちわかりません。 例 下記で選択された場合 選択された値をここに表示＋<input type="hidden" value="ここに選択された値"> <SELECT name="name"> <OPTION value="tarou">太郎</OPTION> <OPTION value="hanako">花子</OPTION> <OPTION value="saburou">三郎</OPTION> </SELECT> <A href="" onclick="">決定</A> しかも、選択した後にさらに選択して決定を押下することで 選択された値をつみかせねて表示したいのですが、 どなたかご教授して頂けないでしょうか？
- 締切済み
- デザイナー・クリエイティブ職
- WEB画面におけるプルダウンメニューで選択した値の保持
web画面において、各頁にプルダウンメニューを設定し、そこから各頁へジャンプさせたいと思っています。 TOP画面のプルダウンメニューを [選択して下さい]→[pageA]→[pageB]とし、 top画面のプルダウンメニューより[pageA]を選択した場合 pageAのプルダウンメニューでは [選択して下さい]ではなく、[pageA]が表示させたいのですが この場合、どうすれば宜しいのでしょうか？ 私が組んだソースは下記の通りですが 下記の場合だと、各頁にジャンプ後も [選択して下さい]が表示されてしまいます。 <form> <select onchange="location.href = options[this.selectedIndex].value;"> <option value="#">選択して下さい。</option> <option value="pageA.html">pageA</option> <option value="pageB.html">pageB</option> </select> </form> 初心者の為、ご教授頂けると助かります。
- ベストアンサー
- その他([技術者向] コンピューター)
- 複数のプルダウン
いつも参考にしております。 プルダウンが選択後、もうひとつのプルダウンを表示したいと 思っておりますが、うまく表示されません。 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つだけのメニューになるはずだと思うのですが。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- プルダウンを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の文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。
- 締切済み
- JavaScript
- プルダウンメニューの内容の取得方法ってありますか？
プルダウンメニューで、VALUE値 選択された項目の内容って取得できないんでしょうか。 <FORM NAME="sltTest"> <SELECT NAME="slt01"> <OPTION VALUE="01">内容１</OPTION> <OPTION VALUE="02">内容２</OPTION> </SELECT> </FORM> たとえば上記のようなメニューのとき、 選択された「内容１」もしくは「内容２」を取得したいとき どう記述すれば取得可能でしょうか。
- ベストアンサー
- JavaScript
お礼
アドバイスありがとうございます。 仰られる通りcookieを使い方法しかなさそうですが、最初にアドバイスを頂いた方法でも十分期待通りの動作をしてくれるので助かりました。 教えて頂きありがとうございました。 また、質問させて頂いた時にはよろしくお願いします。