※同様の処理が「Javascriptサンプル」にもある場合があります。
そちらの方もご参照下さい。
■ セレクトボタンでプルダウンメニューを作成する
フォームのセレクトメニューで選択するだけで該当ページに自動ジャンプします。
プルダウンメニュー形式です。
また、一覧表形式(セレクトボックス)でも同様のことが可能です。
◆ 実行サンプル
略号の説明 | 動作が確認できたブラウザ |
---|---|
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53 |
- 【 解 説 】
-
まずページジャンプさせたい時のJavascriptは、
location.href='(ジャンプ先のアドレス)';と記述します。
セレクトメニューを作成して、それが選択された時は、
onchange="(javascriptの記述)"で引っ掛けることができます。
また、現在セレクトメニューで選択されてる内容を自分自身(セレクトメニュー)で取得したい場合は、
this.options[this.selectedIndex].valueと記述することで取得できます。
したがって、セレクトメニューの場合、選択された内容でページジャンプさせる時は、
location.href=this.options[this.selectedIndex].value;という記述になり、これをセレクトメニューが選択されたときに実行させたいわけですから、
onchange="location.href=this.options[this.selectedIndex].value"となります。
- 【記述サンプル】
-
セレクトメニューで選択後、自動ジャンプさせたいときは、BODY句内に次のように
記述します。
<FORM> <SELECT onchange="location.href=this.options[this.selectedIndex].value"> <OPTION value="frmjmp0.html">- メニュー一覧 -</OPTION> <OPTION value="color.html">カラーサンプル</OPTION> <OPTION value="docenv.html">ドキュメント情報</OPTION> <OPTION value="drop00.html">ドロップシャドウ</OPTION> <OPTION value="form00.html">テキストエリアの書体変更</OPTION> <OPTION value="form01.html">日本語入力のON/OFF</OPTION> <OPTION value="graph1.html">ポップアップウィンドウ</OPTION> <OPTION value="graph2.html">画像の重ね合わせ</OPTION> <OPTION value="hinttxt.html">ヒントテキストの表示</OPTION> </SELECT> </FORM>
セレクトメニューを一覧表形式(セレクトボックス)にしたい場合は、上記のSELECTタグの部分を次のように記述します。
<SELECT onchange="location.href=this.options[this.selectedIndex].value" size="5">