ベストアンサー

セレクトメニューから該当するページを表示

2005/10/12 16:34

下記コードを作成しました。セレクトメニューを選択したら該当するページを表示させるプログラムです。 <select name="cmbSel" onChange="PageJump()"> <option>トップページ1</option> <option>トップページ2</option> 上記だけでリンクページへ飛ぶような事はできないのでしょうか？どなたかご存知の方いましたらご教授頂けると幸いです。宜しくお願い致します。 ///////////////////////////////////////////////////////////////// </select> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <script language="JavaScript" type="text/javascript">  </script> <form name="frmMain"> <select name="cmbSel" onChange="PageJump()"> <option>トップページ1</option> <option>トップページ2</option> </select> </form> </HTML>

a50
お礼率31% (55/176)

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

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

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

ベストアンサー

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/10/12 20:24 回答No.4

<select name="cmbSel" onChange="location.href=this.options[this.selectedIndex].value"> <option value="http://www.yahoo.co.jp/">トップページ1</option> <option value="http://mail.yahoo.co.jp/">トップページ2</option> </select>

質問者

お礼 2005/10/14 11:47

有難うございます。ただ単に onChange="location.href=this.options[this.selectedIndex].value">にすればよかったのですね。

その他の回答 (3)

disneypooh555
ベストアンサー率50% (1/2)

2005/10/12 17:11 回答No.3

#2です。すみません。ソース中の「alert(sts);」はデバック用につけたので、はずしてください。

disneypooh555
ベストアンサー率50% (1/2)

2005/10/12 17:05 回答No.2

こんにちは。ソースをコピーして実際に実行してみました。 break文がないため、case 0の場合にも、case 0の処理を実行後に、case 1の処理が実行されているようです。結果的にトップページ１とトップページ２のどちらを選択しても、トップページ２が表示されてしまうのです。以下のようにソースを修正してみてください。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <script language="JavaScript" type="text/javascript">  </script> <form name="frmMain"> <select name="cmbSel" onChange="PageJump()"> <option>トップページ1</option> <option>トップページ2</option> </select> </form> </HTML> また、default：以下の部分は、stsが0でも1でもない場合に実行されます。必須ではありませんが、switch文を記入する際には、default文を合わせて記入することをオススメします。参考URLの内容もご覧になって見て下さい。

参考URL：: http://www.site-cooler.com/kwl/javascript/6.htm#6-3

質問者

補足 2005/10/12 18:03

セレクトメニューとちょっとしたスクリプトだけで作成できるような感じで作りたいのです。下記コードのようにURLをフォームに埋め込んで使うようなやり方です。 <select name="cmbSel" onChange="PageJump()"> <option value="http://www.yahoo.co.jp/">トップページ1</option> <option value="http://mail.yahoo.co.jp/">トップページ2</option> 上記では実行できませんが、何かにアレンジする事により下記ページの「右上のセレクトボックス」のスクリプトを参考 http://www.otaku-town.com/ 宜しくお願い致します。

coboler
ベストアンサー率57% (57/99)

2005/10/12 17:00 回答No.1

switch文を switch (sts) { case 1: location.href="http://www.yahoo.co.jp/"; break; case 2: location.href="http://weather.yahoo.co.jp/weather/"; break; } として、select部分を <select name="cmbSel" onChange="PageJump()"> <option></option> <option>トップページ1</option> <option>トップページ2</option> </select> とすれば、正しく動作すると想います。

質問者

補足 2005/10/12 17:03

アドバイス有難うございます。質問したコード実行可能です。 Break文が抜けていたのは質問ミスです。

関連するQ&A

セレクトメニューで
セレクトメニューでフレームを使った、複数のセレクトメニューで今の状態だと、上のセレクトメニューは問題ないのですが下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけになってしまいます。要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript">  </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD>
- 締切済み
- JavaScript
時間ごとに異なるページを表示させたい
今、ホームページを作成しています。朝、夜で違うページを表示させたいのですが、どうしてもうまくいきません。記述したタグを書きますので、どなたかアドバイスいただけないでしょうか？ ●朝（7時～17時）→index.html ●夜（17時～翌朝7時）→index2.html 上記の時間帯で、異なるページを表示したいです。あと、初心者なのでこんな事をお尋ねして申し訳ないのですが、指示する Javascriptは、index.htmlだけのscriptsタグ内に記述するものでしょうか？それとも、index2.htmlにも記述するべきですか？いろいろ検索して試してみましたが、どうしてもうまくいきませんでした。アドバイスよろしくお願いします。 *************************************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>ああああああ</title> <meta http-equiv="refresh" content="5;URL=http://www.aaa.co.jp/top.html"> <meta name="robots" content="all" /> <meta name="keywords" content="ああ,いい" /> <meta name="description" content="ううえええおお。" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <link href="common/text.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> <script language = "JavaScript">  </script></head>
- ベストアンサー
- その他([技術者向] コンピューター)
孫ファイルに書き込むメタタグは何が必要？
トップページのindexからみて孫にあたるhtmlファイルにどのようなメタタグを書き込んだらいいでしょうか？今はトップページと同じく <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content=""> <meta name="Keywords" content=""> の４つを書き込んでいます。
- ベストアンサー
- HTML
プルダウンをもう一つ増やしたい＆フレームページで使用のため、別ウインドウで表示させたい
↓他サイトさんにてサンプルで置いてあったものを拝借して自分なりにやってみました。１、これをさらにもうひとつプルダウンを選択させて他サイトへジャンプさせる場合はどのようにしたらよいですか。２、フレームページで使うので、他サイトの表示を別ウインドウで表示させたいのですが、どのようにしたらよいですか。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http:///www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript" language="JavaScript">  </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">選んでください</option> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select> <select id="item1" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item2" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item3" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい
web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。 1.　topページにセレクトボックスを設置。 2.　セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。 3.　2を繰り返す。このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。 script_test01.htmlの内容 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <script type='text/javascript' src='script_test01.js'> </script> <br> <form name='form_0'> <select onchange='rewrite()' name='sel_0'> <option>A or B</option> <option>A</option> <option>B</option> </select> </body> </html> -------------------------------------------------- script_test01.jsの内容 -------------------------------------------------- function rewrite() { var sel_in =document.form_0.sel_0.options.selectedIndex; var sel_name = document.form_0.sel_0.options[sel_in].text; document.write('<html>\n'); document.write('<head>\n'); document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n'); document.write("<script type='text/javascript' src='script_test01.js'>\n"); document.write("</script>\n"); document.write('</head>\n'); document.write('<body>\n'); document.write(sel_in,' : ',sel_name,'<br>\n'); /* ↓この部分がうまくいかない document.write('<br>\n'); document.write('<form name='form_0'>\n'); document.write('<select onchange='rewrite()' name='sel_0'>\n'); document.write('<option>A or B</option>\n'); document.write('<option>A</option>\n'); document.write('<option>B</option>\n'); document.write('</select>\n'); /* ↑この部分がうまくいかない document.write('</body>\n'); document.write('</html>\n'); } -------------------------------------------------- script_test01.jsのコメントアウトをはずすとエラーになります。 script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。 topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか？「日本語[EUC]」に出来ないでしょうか？
- ベストアンサー
- JavaScript
セレクトメニューの値を読み出す方法
セレクトメニューのoptionに設定した値を読み出したいのですがうまくいきません。間違っている部分をご指摘いただけませんでしょうか。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script type="text/javascript">  </script> </head> <body> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <form> <select onchange="checkm(this)"> <option value="20000">シルバー</option> <option value="30000">ゴールド</option> <option value="40000">プラチナ</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
euc-jpのページをIE7で表示したら真っ白に表示される
PHPでHTMLを吐き出すeuc-jpのページをIE7で表示したら真っ白になってしまうページがあるのですが、エンコードを日本語選択にしたり画面を更新（F5) したりすれば通常表示されることから、 IE7 で画面が真っ白になるページの対処方法 http://www.drk7.jp/MT/archives/001163.html と同じ症例ではないかと断定したのですが、↑などを参考に下記のようにしてみましたが、改善ありません。その他、特効薬はありますか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="ja"> <HEAD>  <meta name="content-language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript">
- ベストアンサー
- HTML
フレームページに文字が表示されなくて困ってます＞＜
フレームページに文字が表示されなくて困ってます＞＜フレームページは表示されるのですがmenu.html.htmlやcontents.html.htmlに書いた文字が表示されませんどこが間違っているのでしょうか？ーーフレームページーー <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タトル</TITLE> </HEAD> <FRAMESET cols="100,*"> <FRAME name="menu.html.html" src="file:///D:/happystyle/menu.html.html"> <FRAME name="contents.html.html" src="file:///D:/happystyle/contents.html.html"> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> ーーmenu.html.htmlーー <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD> <BODY> 画像置き場 </BODY> </HTML> ーーcontents.html.htmlーー <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD> <BODY> 画像表示 </BODY> </HTML> というHTMLを書きました！フレームに表示させたいページのHTMLはフレームと同じフォルダに入っているのですがこれと関係ありますか？どこがおかしいのかまったくわからないです教えてください！
- ベストアンサー
- その他([技術者向] コンピューター)
selectでinputの表示を変えたい
セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更という感じにしたいのですが、可能でしょうか？可能であれば書き方を教えていただけると助かります。よろしくおねがいします。
- 締切済み
- JavaScript
セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算をプルダウンメニューで選択し、３つ目のテキストボックスに計算結果を表示するにはどのようにしたらよいのでしょうか？とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript">  </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。どうかよろしくお願いします。
- ベストアンサー
- JavaScript

セレクトメニューから該当するページを表示