<html lang="ja"> <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"> <!-- function url_jump() { var num = document.form1.select1.selectedIndex; location.href = document.form1.select1.options[num].value; } // --> </script> </head> <body> <form action="#" name="form1"> <select name="select1"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> <input type="button" value="ジャンプ" onclick="url_jump();"> </form> </body> </html>
<form action="#"> <select name="select1"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> <input type="button" value="ジャンプ" onclick="location.href = this.form.select1.options[select1.selectedIndex].value;"> </form>
ドロップダウンメニュー(プルダウン)にある option の value 値に移動先の URL とドロップダウンに表示される名前を記述してください。1番初めの「えらんでね」の所に "#"、もしくは現在表示している URL を指定しておかないと、「えらんでね」を選択したときにディレクトリが表示されます。(サーバにもよります)
document.フォーム名.エレメント名.selectedIndex とすると、フォームの option の位置の番号を取得することができますので、document.form1.select1.selectedIndex として、フォームの option の位置を取得します。1番初めの番号は 0 なので、この場合「えらんでね」が 0、「アニメーション GIF」が 1 のようになります。それを変数 num に代入します。
次に、document.フォーム名.エレメント名.options[n].value とすると、取得したい option の value 値を取得することができますので、document.form1.select1.options[num].value として、selectedIndex で取得した位置番号の変数 num を options[num] に代入してドロップダウンの option の値を location.href に代入して選択された URL を表示します。
<html lang="ja"> <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"> <!-- function url_jump2() { location.href = document.form2.select1.value; } // --> </script> </head> <body> <form action="#" name="form2"> <select name="select1"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> <input type="button" value="ジャンプ" onclick="url_jump2();"> </form> </body> </html>
<form action="#"> <select name="select1"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> <input type="button" value="ジャンプ" onclick="location.href = select1.value;"> </form>
document.フォーム名.エレメント名.value とすると、その要素の内容を取得することができますので、それを location.href としてその URL を表示します。このように selectedIndex を使わなくても直接ドロップダウンの option の値を取得することができます。ただし、この方法は Netscape Communicator 4.x では取得することができませんのでご注意ください。
<html lang="ja"> <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"> <!-- function url_window() { var num = document.form3.select1.selectedIndex; var url = document.form3.select1.options[num].value; window.open(url, "new"); } // --> </script> </head> <body> <form action="#" name="form3"> <select name="select1"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> <input type="button" value="ジャンプ" onclick="url_window();"> </form> </body> </html>
<form action="#"> <select name="select1"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> <input type="button" value="ジャンプ" onclick="window.open(this.form.select1.options[select1.selectedIndex].value, 'new');"> </form>
別ウィンドウで開くには location.href ではなくて window.open() を使用します。window.open() を使用しますので、ウィンドウのプロパティを追加することもできます。