説明

選択フォームの値にURLを設定しておいて、選択フォームを変更したときに、ページを移動させてみます。
『選択フォームでジャンプ先を変更してみる』 の応用編です。

実行例

ここから選択してください 覚書トップ 更新履歴 まとめてダウンロード

コード

function pageJump(obj){
	var url = obj.options[obj.selectedIndex].value;
	if (url) { window.location.href = url; }
}

<FORM>
<SELECT onChange="pageJump(this);">
<OPTION selected>ここから選択してください</OPTION>
<OPTION value="./h_all_top.html" selected>覚書トップ</OPTION>
<OPTION value="./h_all_hist.html">更新履歴</OPTION>
<OPTION value="./h_all_down.html">まとめてダウンロード</OPTION>
</SELECT>
</FORM>

解説＆ステップアップ

一番目の項目は「onChange」イベントでは使用できない（最初から選択されているため「onChange」イベントが発生しない）ので、メッセージを入れておきます。 しかし、この選択フォームでページを移動した後に戻ってくると、一番上も選択できるので（違う項目が選択されている状態になっているため）、if文による分岐を作っておかないとエラーになってしまいます。

動作確認

IE5.0(win)、IE5.5(win)、NN4.7(win)