セレクトボックスからジャンプする

■ 説明

相次いで何件か質問が来たので紹介します。セレクトボックスで選択をすると、もしくは選択して[GO]ボタンを押すと、そのページにジャンプします。別フレームにジャンプさせたい時は、location.href を、top.フレーム名.location.href にしてください。

■ 実例

■■ 選んでね ■■ とほほのHTMLリファレンス とほほのCGI入門 とほほのJavaScript入門

■■ 選んでね ■■ とほほのHTMLリファレンス とほほのCGI入門 とほほのJavaScript入門

■ ソースコード

<SCRIPT LANGUAGE="JavaScript">
<!--
function jump(sel) {
  if (sel.options[sel.selectedIndex].value) {
    location.href = sel.options[sel.selectedIndex].value;
  }
}
// -->
</SCRIPT>

<FORM>
<SELECT onChange="jump(this)">
<OPTION VALUE="">■■ 選んでね ■■
<OPTION VALUE="wwwref.htm">とほほのHTMLリファレンス
<OPTION VALUE="wwwcgi.htm">とほほのCGI入門
<OPTION VALUE="wwwjs.htm">とほほのJavaScript入門
</SELECT>
</FORM>

<FORM>
<SELECT NAME="s1">
<OPTION VALUE="">■■ 選んでね ■■
<OPTION VALUE="wwwref.htm">とほほのHTMLリファレンス
<OPTION VALUE="wwwcgi.htm">とほほのCGI入門
<OPTION VALUE="wwwjs.htm">とほほのJavaScript入門
</SELECT>
<INPUT TYPE=button VALUE="GO!" onClick="jump(this.form.s1)">
</FORM>

■ 動作確認

IE4.0/5.0(Win)、IE4.5(Mac)、NN2.0/3.0/4.0(Win)、NN4.7(Mac)での動作を確認しています。 GOボタンをつけない場合、NN2.0では選択後、何か(背景など)をクリックした時点でジャンプするようです。