JavaScriptでプルダウンメニューを作成して、項目をクリックすればページが開くホームページを作成中！

2023/09/06 03:34

このQ&Aのポイント

JavaScriptを使用してプルダウンメニューを作成し、項目をクリックすると指定したページが開くホームページを作成中です。
参考書を片手に、現在努力しています。
具体的なプログラムの例として、プルダウンメニューから「項目を選択」→「クリック」することで対応するページにリンクする方法を説明しています。

ベストアンサー

プルダウメニューの項目をクリックして！ページを開く

2014/09/29 00:33

Jaba Scriptでプルダウンメニューを作成して、項目をクリックすればページが開くホームページを作成中です。　参考書片手に現在頑張っているところですが！　以下がその参考書のプログラムです。 ------------------------------------------------------　 <HTML> <HEAD> <TITLE>リンク先をプリダウンメニューで表示したい</TITLE> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <BODY> <FORM NAME="form01"> <SELECT NAME="url" onChange="linkMenu(this.selectedlndex)"> <OPTION>クリックして選択してね <OPTION>e-support <OPTION>Office TAKASAKU </SELECT> </FORM> </BODY> </HTML> ----------------------------------------------------------- 　以上のプログラムの11行目の　http://www.k-support.gr.jp/index.html 　　HPファイルの”トップページ”アドレスだと思います。　それでは13行目の　http://www.takasaku.co.jp 　のアドレスはいったい何のアドレスでしょうか！　　プルダウンメニューは簡単にできますが　プルダウンメニューから　「項目を選択」→「クリック」・すればそのページが開くといったようなごく普通のHPを開く場合の流れですが、ページへリンクさせるには以上プログラムで　本当にできるのでしょうか！？　　たとえば！以上のプログラムの中の <OPTION>e-supportでe-supportを　　クリックすれば　　　http://homepage3.nifty.com/mtaiyo/9%E2%96%B3ABC.JPG 　のアドレスへのページが出てくるようにしたいのですがどうしたら出来るのでしょうか！？ちなみに　トップページのアドレスは　http://homepage3.nifty.com/mtaiyo/です。　　宜しくお願いします。

Campus2
お礼率47% (226/475)

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

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

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

ベストアンサー

Taiyonoshizuku
ベストアンサー率37% (183/489)

2014/09/29 12:20 回答No.2

トップページのアドレスがどうのこうのっていうか onChange="linkMenu(this.selectedIndex);" でコンボ変更時に選択されたオプションのインデックスを引数にlinkMenuを呼び出す。 linkMenuはそのインデックスを受け取って動作する。 if ( m == 0 )は０のとき、すなわち一番上の「クリックして選択してね」が選択されたらなにもせず終了 if ( m == 1)は１のとき、すなわちe-supportが選択された時そしたら http://www.k-support.gr.jp/index.html%22 がリンク先となる。だからこの部分を http://homepage3.nifty.com/mtaiyo/9%E2%96%B3ABC.JPG にすりゃいい

質問者

お礼 2014/09/30 20:48

ありがとうございました。　助かります。

その他の回答 (1)

hitomura
ベストアンサー率48% (325/664)

2014/09/29 01:02 回答No.1

・http://www.k-support.gr.jp/index.html 　二番目の option を選択した場合のページ遷移先・http://www.takasaku.co.jp 　三番目の option を選択した場合のページ遷移先ちなみに一番目を選択した場合は何もしないなお、プルダウンする動作はこのコードには出てきていません。多分 CSS で実装……できます、よね? ＞ CSS に詳しい諸兄

質問者

補足 2014/09/29 01:37

　レスありがとうございました。「プルダウンする動作はこのコードには出てきていません。」　　そうですか！CSSですか！今度はHTMLの参考書に書かれていたプルダウンのプログラムは以下ですが！？　ページを開くためには以下のプログラムでけではむりなのでしょうか！　どこかを手直しすれば出来ようなそんな簡単なことなのでしょうか　　<HTML> <HEAD> <THTL>プルダウンメニュー</TITLE> </HEAD> <BODY> <SELECT name="from" size="4"> <OPTION value="yahoo">Yahoo!JAPAN</OPTION> <OPTION value="engine"selected>Yahoo!以外の検索サイト </OPTION> <OPTION value="link">リンクをたどって</OPTION> <OPTION value="other">その他</OPTION> </SELECT> </BODY> </HTML> 以上のプログラムのプルダウンメニューですが！ Yahoo!JAPAN の項目をクリックしても以上プログラムだとyahooの現在の http://www.yahoo.co.jp/ のトップページへを開くことができません！どうしたらできるようになりますか！宜しくお願いします。　

関連するQ&A

プルダウンメニューの項目をクリックしてもリンク先に
<HTML> <HEAD> <TITLE>リンク先をプリダウンメニューで表示したい</TITLE> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <BODY> <FORM NAME="form01"> <SELECT NAME="url" onChange="linkMenu(this.selectedlndex)"> <OPTION>クリックして選択してね <OPTION>e-support <OPTION>Office TAKASAKU </SELECT> </FORM> </BODY> </HTML> 以上ですが　プルダウンメニューの項目をクリックしてもリンク先が開かないのですが！？何かミスがあるでしょうか！？　宜しくお願いします。
- ベストアンサー
- JavaScript
簡単なチェックをするページを作りたい
フォームのプルダウンメニューを使って簡単なチェックをするページを作りたいと思っています。ネットでしらべつつ一応希望どおりに動くようになりました。プルダウンメニューは２つあり、それぞれを選択すると隣のテキストボックスにチェック結果を表示されるようにしました。 <script language="JavaScript"> <!-- function check(){ kazu = document.form.kazu.value; iro = document.form.iro1.value; if (kazu == 2) { if (iro == 2) { messe = "s"; } else { messe = ""; } }else if (kazu == 1) { if (iro == 2) { messe = "c"; } else { messe = ""; } } else { messe = ""; } document.form.pri1.value = messe; } ↑ものすごく簡略化してます kazuのプルダウンは１つだけですが、iroのプルダウンは複数あります。条件はみな同じです。いま完成したスクリプトではiro1のプルダウンメニューを変更したらその隣のテキストボックス（pri1）に表示させることができます。それをiro2を変更したらiro1と同じ条件でテキストボックス（pri2）に表示させることは可能でしょうか？コピーペーストして変数を変えればできるのでしょうが、もっと簡略化する方法があれば教えてください。説明不足なところがあり申し訳ございません
- ベストアンサー
- JavaScript
プルダウンメニュー中の項目をクリックしたらリンクへ
　　　プルダウンメニュー中の項目をセレクトして、その中のお好みのタグをクリックしたら　　お目当てのページが開くHPをよくめにします。　　私が作成しいるHPの初期画はリンクタグが多くなりすぎて見た目もよくないし、　　他人が使いずらそうなので、プルダウンメニュー方式で項目ごとにまとめたいです。　しかし、HPの参考書の通り作成しても、リンク先のページを開くプログラムがないみたいです。　　（たぶん）　　　<option value="yahoo">Yahoo! JAPAN</OPTION> 　　以上はプルダウンメニューのプログラムの抜粋です。　　Yahoo! JAPAN　をクリックしたら　「akkotyan.html」というファイルにアクセスして　HPが開くようにしたいのですが、どういったプログラムを組めばできますか！？　　　　私が現在作成しているホームページの材料　　　（index.html、akkotyan.htmlなど）は同一フォルダ内にあります。　宜しくお願いいたします。
- ベストアンサー
- HTML
プルダウンで選択したページから戻った時
どなたか教えてください。プルダウンで選択したページにリンクして、そのページから戻ってきた場合、プルダウンメニューは選択した項目ではなく、一番上に来る項目が選択されているようにしたいのです。例：--メニュー-- 　　　テスト1ページへ　　　テスト2ページへ ↓をやったら、うまくいったのですがステータスバーに「1」と表示されてしまいました。 <script language="JavaScript">  </script> ちなみにselectのところはこのように書きました。 <form method="POST" name="jump"> <select name="jump" onChange="gotosite(this.options [this.selectedIndex].value)"> よろしくお願いします。どうしても「1」を出したくないんです。やっぱり無理なんでしょうか？
- ベストアンサー
- JavaScript
プルダウンメニューのターゲット指定
タイトルどおりなのですが、プルダウンメニューのリンク先を同ページ内のiframeにしたいのですがこれはどうすればできるのでしょうか？こちらに現在の状況を載せておきます。 <SCRIPT LANGUAGE="JavaScript"></SCRIPT> <FORM NAME="f"> <SELECT NAME="jumpto" onChange="Jump();">> <OPTION VALUE="-" SELECTED>移動先を選択</OPTION> <OPTION VALUE="menu1.htm" target="menu">Page1</OPTION> <OPTION VALUE="menu2.htm" target="menu">Page2</OPTION> </SELECT> </FORM> よろしくお願い致します。
- ベストアンサー
- 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
2個選択することで初めて表示というのができない
<!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (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 id="output"></div> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <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> ↑はjsの分ですが、 2個選んだら初めてイベントが発生するプログラムを作成しているのですが、いかんせんうまくいきません。恐らく、var value = document.forms.form1.Select1.value;のところで、躓いているのだと思います。 document.formsにカンマをつけてみたり、さらに、両端に[]をつけてみたり、いろいろ試しましたが、うまくいきません。それとも、重ねること自体ができないのでしょうか。どうしたらいいのでしょうか。
- 締切済み
- JavaScript
必須項目の回答がない場合、次のページに進まない
お世話になります。プログラミング初心者のものです。 JavaScriptを用いて、必須項目(プルダウンメニュー)の回答が全てされていない場合に、次のページへ進まず、アラートが表示されるように設定したいと考えています。そこで、以下のコードを書いたのですが、設定する項目が13項目あり、8項目目から13項目目が未回答でも次のページに進めてしまいます。これだけ量が多くなると、このプログラムだと実現出来ないのでしょうか？どこをどう直せば、改善されるのかを教えていただければ幸いです。不躾な質問だとは重々承知しておりますが、時間がないため、何卒よろしくお願いいたします。 ●JavaScript <script type="text/javascript">  </script> ●HTML(長くなるため最初の2つだけ書いておきます) <h1><span class="daimei"><b>ウォーターベースファンデーション</b></span><span class="honbun">について</span></h1> <form action="tiku.php" method="post" name="aboutfande" onSubmit="return check()"> <p><span class="honbun">　Q1.この商品を買いたいと思いますか？</span>　 <select name="fande1"> <option value="1">はい</option> <option value="2">いいえ</option> <option value="" selected>選択してください</option> </select> </p> <span class="honbun">　Q2.この商品にどのような印象を持ちましたか？<br>　　　もっとも当てはまるものを選択してください</span><br> <p><span class="honbun">　　　1.この商品を魅力的と感じた</span>　 <select name="fande2"> <option value="1">全く当てはまらない</option> <option value="2">ほとんど当てはまらない</option> <option value="3">あまり当てはまらない</option> <option value="4">どちらともいえない</option> <option value="5">やや当てはまる</option> <option value="6">かなり当てはまる</option> <option value="7">非常に当てはまる</option> <option value="" selected>選択してください</option> </select></p>
- ベストアンサー
- JavaScript
同一ページに複数のプルダウンメニュー
同一ページに複数のプルダウンメニューをつけたいのですが、どうすればよいのでしょうか。下記のように1つはつけることができたのですが、 2つめから、どこをどう変えて追加すればよいのかわかりません。 <script language="javascript">  </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> よろしくお願いします。
- ベストアンサー
- JavaScript
javascript をhtmlページで使用する方法を教えてください。
<form name=\"addr\"> リンク先－＞ <select name=\"list\" onChange=\"chg_url()\"> <option value=\"http://www.yahoo.co.jp\">yahoo1</option> <option value=\"http://www.yahoo.co.jp\">yahoo2</option> <option value=\"http://www.yahoo.co.jp\">yahoo3</option> </select> <a href=\"Dest\" target=_blank> リンク　</a> </form> <script language=\"javascript\">  </script> のスクリプトを同じページに何個も利用したいのですが、どうしたらうまくいきますか？同じページにこのスクリプトを設置すると、全部同じページにリンクしてしまいます。java初心者なので、ぜひ教えてください。お願いします。あと、「java」の質問回答の方に間違えて載せてしまいました。すみませんでした（＞＿＜）
- ベストアンサー
- JavaScript

JavaScriptでプルダウンメニューを作成して、項目をクリックすればページが開くホームページを作成中！

プルダウメニューの項目をクリックして！ページを開く