第40回 「セレクトメニューによるジャンプ（２）」
今回はセレクトメニューを使って指定したページにジャンプする方法の続きです。今回は<option>タグのvalueにジャンプ先のURLを指定し、それを読み込んでジャンプさせるようにします。
<option>タグのvalueの値を読み出すには以下のようにします。
document.フォーム名.セレクトメニュー名.オプション名.value
または
document.フォーム名.セレクトメニュー名.options[参照番号].value
参照番号は今までも説明したように0から始まります。例えば以下のような
<form name="abcFORM">
<select name="adrsSEL">
<option value="abc">No 1</option>
<option value="def">No 2</option>
<option value="ghi">No 3</option>
</select>
フォーム名abcFORMのセレクトメニュー名adrsSELの２番目の<option>のvalueを読み出すには
n = document.abcFORM.adrsSEL.options[1].value
のようにします。これで変数nに<options value="def">の値であるdefが入ります。このようにvalueを読み出してlocation.hrefに入れれば指定ページにジャンプすることができます。
以下のプログラムはthisを使ってジャンプさせるものです。thisを使って汎用性を持たせています。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check(fObj)
{
jpURL = fObj.options[fObj.selectedIndex].value;
location.href = jpURL;
}
// --></script>
</head>
<body>
<form>
<select onChange="check(this)">
<option value="http://www.yahoo.co.jp/">Yahoo!</option>
<option value="http://www.goo.ne.jp/">Goo</option>
<option value="http://www.google.com/">Google</option>
</select>
</form>
</body>
</html>
上記プログラムで関数を呼び出さずonChangeの部分に書いてしまう事もできます。その場合は以下のようになります。
<html>
<head>
<title></title>
</head>
<body>
<form>
<select onChange="location.href = this.options[this.selectedIndex].value">
<option value="http://www.yahoo.co.jp/">Yahoo!</option>
<option value="http://www.goo.ne.jp/">Goo</option>
<option value="http://www.google.com/">Google</option>
</select>
</form>
</body>
</html>
これであれば<option>タグを追加／変更するだけですから大変楽です。プログラムを修正する必要もないためプログラムの変更ミスなどは起こらなくなります。
次回はボタン処理について説明します。