<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() { document.form1.select1.blur(); var num = document.form1.select1.selectedIndex; location.href = document.form1.select1.options[num].value; } // --> </script> </head> <body> <form action="#" name="form1"> <select name="select1" onchange="url_jump();"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> </form> </body> </html>
<form action="#"> <select onchange="blur(); location.href = options[this.selectedIndex].value;"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> </form>
ドロップダウンメニュー(プルダウン)にある option の value 値に移動先の URL とドロップダウンに表示される名前を記述してください。1番初めの「えらんでね」の所に "#"、もしくは現在表示している URL を指定しておかないと、「えらんでね」を選択したときにディレクトリが表示されます。(サーバにもよります)
onchange イベントハンドラによってボタンを使用せずに選択肢を選択された(変更された)ときに移動します。
Internet Explorer を使用の場合、移動先からブラウザの「戻る」によって再度このフォームがあるページに戻ってきた時に、フォーム内がフォーカス(選択状態)されていてマウスのホイールを回すとまた移動してしまいますので、初めに document.form1.select1.blur(); としてフォーカスを外しておきます。blur() はそのエレメントのフォーカスを外します。
これとは逆に、戻って来たときに選択されたままの状態にしておきたい場合は、blur() の部分を削除してください。
フォームのみで直接動作させたい場合、options[this.selectedIndex].value を this[this.selectedIndex].value としても取得可能です。this はこのエレメントという意味です。
<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() { document.form2.select1.blur(); location.href = document.form2.select1.value; } // --> </script> </head> <body> <form action="#" name="form2"> <select name="select1" onchange="url_jump2();"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> </form> </body> </html>
<form action="#"> <select onchange="blur(); location.href = this.value;"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> </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() { document.form3.select1.blur(); var num = document.form3.select1.selectedIndex; var url = document.form3.select1.options[num].value; window.open(url); } // --> </script> </head> <body> <form action="#" name="form3"> <select name="select1" onchange="url_window();"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> </form> </body> </html>
<form action="#"> <select onchange="blur(); window.open(options[this.selectedIndex].value);"> <option value="#">えらんでね <option value="../../anime/index.html">アニメーション GIF <option value="../../hamu/index.html">ハムちゃんの部屋 </select> </form>
別ウィンドウで開くには location.href ではなくて window.open() を使用します。window.open() を使用しますので、ウィンドウのプロパティを追加することもできます。
Internet Explorer を使用の場合に window.open() によって開かれたウィンドウを閉じて現在のページがアクティブになったときに、フォームが選択状態にならないように blur() を追加しておきます。(不要の場合はこの部分を削除してください)
フォームのみで直接動作させたい場合、options[this.selectedIndex].value を this[this.selectedIndex].value としても取得可能です。