※同様の処理が「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.shtm">−− メニュー一覧 −−</OPTION>
<OPTION value="color.shtm">カラーサンプル</OPTION>
<OPTION value="docenv.shtm">ドキュメント情報</OPTION>
<OPTION value="drop00.shtm">ドロップシャドウ</OPTION>
<OPTION value="form00.shtm">テキストエリアの書体変更</OPTION>
<OPTION value="form01.shtm">日本語入力のON/OFF</OPTION>
<OPTION value="graph1.shtm">ポップアップウィンドウ</OPTION>
<OPTION value="graph2.shtm">画像の重ね合わせ</OPTION>
<OPTION value="hinttxt.shtm">ヒントテキストの表示</OPTION>
</SELECT>
</FORM>

セレクトメニュー一覧表形式(セレクトボックス)にしたい場合は、上記のSELECTタグの部分を次のように記述します。
<SELECT onchange="location.href=this.options[this.selectedIndex].value" size="5">

■ デザインテンプレート


Home ↑ページトップ

Copyright (c) 2000-2004, all Rights Reserved & Produced by atom