第39回 「セレクトメニューによるジャンプ（１）」
今回はセレクトメニューを使って指定したページにジャンプする方法について説明します。
セレクトメニュー項目にジャンプ先の名前を指定しておき、何番目が選択されたかで指定したページにジャンプするようにします。セレクトメニューは以下のように普通に作成します。
<option>Yahoo!</option>
<option>Goo</option>
<option>Google</option>
あとは以下のように<select>タグにonChangeイベントを記述しジャンプ処理を行う関数を呼び出します。
<select onChange="check(this.selectedIndex)">
呼び出された関数側では選択された項目の番号に応じてジャンプ処理を行います。
まだ特定のURLにジャンプする方法について説明していませんでした。JavaScriptで特定のURLのページにジャンプするにはlocation.hrefにジャンプ先のページURLを入れます。例えばYahoo JAPANにジャンプする場合は、そのURLであるhttp://www.yahoo.co.jp/を入れます。これは以下のように記述します。
location.href = "http://www.yahoo.co.jp/"
次に選択番号に応じてジャンプさせる方法ですがif命令を使って記述したものが以下のプログラムです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check(n)
{
if (n == 0) location.href = "http://www.yahoo.co.jp/";
if (n == 1) location.href = "http://www.goo.ne.jp/";
if (n == 2) location.href = "http://www.google.com/";
}
// --></script>
</head>
<body>
<form>
<select onChange="check(this.selectedIndex)">
<option>Yahoo!</option>
<option>Goo</option>
<option>Google</option>
</select>
</form>
</body>
</html>
これだと選択項目が少ない場合には問題がありませんが、選択項目が多くなるとif命令が、ずらっと並んでしまいます。n == の部分の数字も行ごとに変えなければならず入力ミスをする可能性も増えます。このような場合は、配列を使えば簡潔に記述することができます。配列にジャンプ先のURLを入れておきます。この時に適当に入れるのではなく、参照番号と対応するように入れておきます。
ジャンプ先が
"http://www.yahoo.co.jp/"
"http://www.goo.ne.jp/"
"http://www.google.com/"
であり、この順番になっている場合には以下の順番で配列にジャンプ先URLを入れておきます。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check(n)
{
jpURL = ["http://www.yahoo.co.jp/","http://www.goo.ne.jp/","http://www.google.com/"];
location.href = jpURL[n];
}
// --></script>
</head>
<body>
<form>
<select onChange="check(this.selectedIndex)">
<option>Yahoo!</option>
<option>Goo</option>
<option>Google</option>
</select>
</form>
</body>
</html>
この方法でも悪くはありませんが、ジャンプ処理を行うプログラムは他では流用できそうもありません。そこで次回は、一工夫して<option>タグ内にジャンプ先のURLを入れておき、それを参照してジャンプするようにしてみます。