フォームのプルダウンで動的にデフォルト選択項目を切り替えたい

このQ&Aのポイント
  • フォームのプルダウンで、動的にデフォルト選択項目を切り替える方法について詳しく教えてください。
  • ページ1のリンクABCそれぞれから同一の送信フォームページ(ページ2)にジャンプする際に、選択したリンクに応じてプルダウンのデフォルト表示を変更したいです。
  • どのように[html-html]間で情報を引き継ぎ、受け取ることができるのかについても知りたいです。
回答を見る
  • ベストアンサー

フォームのプルダウンで、動的にデフォルト選択項目を切り替えたい

ページ1の中のリンクABCそれぞれから同一の送信フォームページ(ページ2)にジャンプします。 そのとき、前ページで選択したリンク別に、プルダウンのデフォルト表示を変えたいのですが cgiなしで可能でしょうか。   (1)CGIを使わない方法   (2)CGIを使った方法(できれば避けたい) 具体的な記述方法、あるいは同様の回答のある質問no/urlを教えてください。 また、[html-html]間の情報の引継ぎ/受取方法も知りたいです。 よろしくおねがいします。 ---------------------------------------------------------- [ページ1] <a href="a.html')">A</a> <a href="a.html')">B</a> <a href="a.html')">C</a> ---------------------------------------------------------- [ページ2] >>Aからジャンプしてきた時  <select name="リンク元">   <option value="a" selected>Aからのリンク</option>   <option value="b">Bからのリンク</option>   <option value="c">Cからのリンク</option>  </select> >>Bからジャンプしてきた時  <select name="リンク元">   <option value="a">Aからのリンク</option>   <option value="b" selected>Bからのリンク</option>   <option value="c">Cからのリンク</option>  </select> >>Cからジャンプしてきた時  <select name="リンク元">   <option value="a">Aからのリンク</option>   <option value="b">Bからのリンク</option>   <option value="c" selected>Cからのリンク</option>  </select> . . . <input type="submit" value=" 送信 "> ----------------------------------------------------------

  • n0s
  • お礼率71% (30/42)

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

  • ベストアンサー
  • westpoint
  • ベストアンサー率35% (173/482)
回答No.1

ページ2のoption3行をJavacriptで書き出してはどうですか。 document.referrerでジャンプ元のURLを取り出し、それによって条件分岐で3パターンのoptionを書けばいいでしょう。 Javascriptが無効になっている人のために、一つのパターンを最初に書いておき、Javascriptで書き出す際には、その部分をコメントタグ書き出しで無効にすれば良いと思います。 <select name="リンク元"> <script type="text/javascript"> <!-- if (document.referrer == 'A'){document.write('   <option value="a" selected>Aからのリンク</option>   <option value="b">Bからのリンク</option>   <option value="c">Cからのリンク</option> <!--') } //--> </script> <noscript>   <option value="a">Aからのリンク</option>   <option value="b">Bからのリンク</option>   <option value="c">Cからのリンク</option> </noscript> <script type="text/javascript"> <!-- if (document.referrer == 'A'){document.write('-->')} //--> </script> </select> こんな感じで、3パターン繰り返すと言う感じです。

n0s
質問者

お礼

document.referrerですか。 さっぱり分かってなかったもので助かりました。 javaオフの対応まで、、、感謝です。 (とっかかりがつかめてなんとかなりそうです。参考ページも見つかりました。 http://www.geocities.co.jp/SiliconValley-Bay/8639/js/linkcheck.html) 回答ありがとうございました。

関連するQ&A

  • cgiへの送信とページリンクのできるプルダウンについて

    初めて質問させて頂きます。 cgiへ送る選択項目と別のページへリンクする項目をひとつの プルダウンでまとめたいと思っています。プルダウンを使って 別のページリンクするタグは分かるのですが、cgiへvalue値を 送るタグが分かりません。 <select onchange="top.location.href=this.options[this.selectedIndex].value"> ※別のページへリンク<option value="a.html">Aのページへ</option> ※cgiのname="A"へ"value値"B"を送る項目<option value="ここがわかりません">Bで検索</option> </select> 質問が分かりにくく大変申し訳ありませんが、ご指導下さると 幸いです。よろしくお願い致します。

  • 複数のプルダウンメニューの選択項目を変更するには?

    複数のプルダウンメニューを使ってページリンクをさせています。 その際ページリンクと同時に、他のメニューの選択項目を初期値す方法を教えてください。 No.157334で同じような質問があったので、それを参考に以下のように記述してみましたが、 function reSel(c) { for(i=0; i<9; i++){ var s="document.unit.DDList"; var x=s+i; if(x != c){ x.selectedIndex=0; //ココがうまくいきません。 } } } function Li_0(obj){ parent.res.location.href=obj.options[obj.selectedIndex].value; reSel("document.unit.DDList0"); } (以降 Li_8まで同様) <form name="unit" method="post"> <select name="DDList0" size="1" onChange="Li_0(this)"> <option value="help.html" selected> </option> <option value="unit_a.html">AAA</option> <option value="unit_b.html">BBB</option> </select> (以降 DDList8まで同様) です。 どうぞよろしくお願いいたします。

  • プルダウンで選択したページにフォームデータを送る

    a.htmlからプルダウンで選択した1~6までのhtmlに、フォームデータを送る ということは可能でしょうか? いろいろ組み合わせたりしていますがうまくいきません。 どなたかご教授お願い致します。 <SCRIPT LANGUAGE="JavaScript"> <!-- function jumpMenu(){ location=(document.link.list.options [document.link.list.selectedIndex].value); } //--></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- // sendURL = " jumpMenu()"; function sendData() { sData = escape(doument.myFORM.theData.value); Location.href = sendURL + "?"+sData; } //--> </SCRIPT> <form name="myFORM"> <SELECT NAME="list"> <OPTION VALUE="1.html" SELECTED>1</OPTION> <OPTION VALUE="2.html">2</OPTION> <OPTION VALUE="3.html">3</OPTION> <OPTION VALUE="4.html">4</OPTION> <OPTION VALUE="5.html">5</OPTION> <OPTION VALUE="6.html">6</OPTION> </SELECT> <INPUT TYPE="TEXT" SIZE="61" NAME="a"> <INPUT TYPE="submit" VALUE="GO" onClick="sendData()"> <INPUT TYPE="reset" VALUE="クリア">

  • 複数プルダウンでメニューを初期表示に戻したい

    No.157334でleaz024さんに「複数プルダウンメニュー」について教えてもらったものですが、ひとつ、追加したいことがあるので教えてください。 教えていただいたスクリプトは <script language="javascript"> <!-- function A_Li() {   Sel=document.Link1.OP.selectedIndex;   Ms=document.Link1.OP.options[Sel].value;   parent.main.location.href=Ms;} function B_Li() {   Sel=document.Link1.OP2.selectedIndex;   Ms=document.Link1.OP2.options[Sel].value;   parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="aaa.htm" SELECTED>ページを選んでください <option value="bbb.htm">ぺージ1</option> <OPTION Value="ccc.htm">ページ2 <OPTION Value="ddd.htm">ページ3 </SELECT> です。 例えば OP2のメニューをクリックしたあと OP3のメニューをクリックしたときにOP2のメニューが初期の 表示メニューに戻したいのですが、どう変えればよいでしょうか。 初心者なので本を見てみたのですがわかりませんでした。 どうぞよろしくお願いいたします。

  • プルダウンを選択していないときは、初期値(selected)の値を、選

    プルダウンを選択していないときは、初期値(selected)の値を、選択したときは選択値を、hiddenで渡したい。 ▽プルダウン例 <form> <select> <option value="0" selected>A</option> <option value="4">B</option> <option value="6">C</option> </select> </form> ↑上で選択した値(A or B or C)値を、↓下のvalue=「"hoge"」に渡したいです。 ※選択肢は3つだけではなくて、たくさんあります。 ▽input例 <input name="category_name" value="hoge" type="hidden"> ※formとかselectにid振っても構いません。 ※javascriptでやりたいです。

  • プルダウンメニューで、選択項目をリンク先でも維持したい。

    javascriptを使用したプルダウンメニューについて質問です。 <form name="form1"> <select name="select" onChange="location=select.options[select.selectedIndex].value"> <option value="a.html#01">A01</option> <option value="a.html#02">A02</option> <option value="a.html#03">A03</option> <option>---------------</option> <option value="b.html#01">B01</option> <option value="b.html#02">B02</option> <option>---------------</option> </select> </form> 2つのページ(a.html、b.html)上部に上記のようなプルダウンメニューを置き、それぞれ相互に行き来できるようにしました。 一応正常に動くのですが、たとえばa.htmlのプルダウンで『B01』を選択してリンク先b.htmlに飛ぶと、プルダウンの選択項目が一番上の『A01』に戻ってしまっています。 b.htmlに飛んだ後も『B01』選択の状態で残したいのですが。 どのようにすればよいのでしょうか・・・ よろしくお願い致します。

  • 複数のプルダウンメニューの表示について

    複数のプルダウンメニューについてですが、 以前、こちらで教えてもらったことを応用したいのです。 フォーームの中の「グループ1」と「グループ2」という大分類は文字の表示だけでリンクしないようにしたいのです。 この状態だと、「グループ1」という名前もプルダウンの中に入ってしまって、 ファイルがないので、リンクエラーの警告がでます。 どこが間違っていて、 どのように変えたらいいのでしょうか。 よろしくお願い致します。 <script language="javascript"> <!-- var s; function reSel(c) { if(s&&(s!=c)) s.options[0].selected=true; s=c; } function A_Li() {   Sel=document.Link1.OP.selectedIndex;   Ms=document.Link1.OP.options[Sel].value;   parent.main.location.href=Ms; reSel(document.Link1.OP); } function B_Li() {   Sel=document.Link1.OP2.selectedIndex;   Ms=document.Link1.OP2.options[Sel].value;   parent.main.location.href=Ms; reSel(document.Link1.OP2); } // --> </script> ---------------HTML------------ <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="-" SELECTED>グールプ1</option> <option value="1.htm">あ</option> <OPTION Value="2.htm">い</option> <OPTION Value="3.htm">う</option> <OPTION Value="4.htm">え</option> <OPTION Value="5.htm">お</option> </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="-" SELECTED>グールプ2</option> <option value="6.htm">か</option> <OPTION Value="7.htm">き </option> <OPTION Value="8.htm">く </option> </SELECT>

  • メールフォームでプルダウンの内容だけ送られてこない

    HTMLファイルでデザインができるメールフォームのcgiで、 名前とEメールアドレスは送られてくるのですが プルダウンの内容だけ、送られてこないんです。 ちなみに携帯サイト用です。 プルダウンの入れ方がおかしいんだと思うのですが 何がいけないのでしょうか? --------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>フォームメール</title> </head> <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF"> <center>フォームメール</center> <hr> <form action="./mail.cgi" method="${INFO_METHOD}"> <input type="hidden" name="system_mode" value="preview"> <input type="hidden" name="need_input_message" value="1"> 名前<br> <input type="text" name="system_name" value=""><br> Eメール<br> <input type="text" name="system_mail" value=""><br> テスト<br> <select name="test01"> <option value="" selected="selected">選択してください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> <option value="テスト4">テスト4</option> </select> テスト<br> <select name="test02"> <option value="" selected="selected">選択してください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> <option value="テスト4">テスト4</option> </select> <br> <input type="checkbox" name="system_copy" value="on" checked> 送信者にコピーを送る<br> <br> <input type="submit" value="確認画面へ"> </form> <hr> ▲<a href="${INFO_BACK}">戻る</a> <hr> </body> </html> --------------------------------------- 今はこうなってます。 何か間違っている箇所、足りない箇所がありましたら ぜひ教えてください。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 同一ページに複数のプルダウンメニュー

    同一ページに複数のプルダウンメニューをつけたいのですが、 どうすればよいのでしょうか。 下記のように1つはつけることができたのですが、 2つめから、どこをどう変えて追加すればよいのかわかりません。 <script language="javascript"> <!-- function A_Li(){ Sel=document.Link1.OP.selectedIndex; Ms=document.Link1.OP.options[Sel].value; parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> よろしくお願いします。

  • プルダウンメニューのselected部分のリンクをとる方法

    以前こちらで教えていただいたプルダウンメニューなのですが、 selected部分にもリンクがされてしまっているので、 これをリンクさせないようにしたいのですが、やり方がわかりません。 どなたか教えていただけますでしょうか? 宜しくお願いいたします。 ソース <form name="b" method="post" target="_blank" action="https://○○○○/reservationtop.asp"> <select name="***************" onChange="document.b.submit()"> <option selected>予約する</option> <option value="1">リンク3</option> <option value="2">リンク2</option> <option value="3">リンク3</option> </select>

専門家に質問してみよう