セレクトボックスでナビゲーションJavaScript入門

セレクトボックスでリンク先を指定する

では実際にソースの書き方を解説します。 以下のような関数とフォームを、body内の表示したい部分に記入しましょう。

<script>

//セレクトボックスに対応するリンク先を配列に入れる
var jpURL = new Array(
"https://www.pazru.net/",
"https://www.pazru.net/js/",
"https://www.pazru.net/saku2/"
);

//リンク先へジャンプさせる関数
function selectNavi(){
  var num;
  
  //何番目のoptionが選択されたか調べる
  num = document.navi.contents.selectedIndex;

  //該当するリンク先へジャンプさせる
  location.href = jpURL[num];
}

</script>


<form name="navi">
<select name="contents" onchange="selectNavi()">
  <option>HOME</option>
  <option>JavaScript入門</option>
  <option>ＨＰ作成講座</option>
</select>
</form>

サンプル（別窓）

スクリプトの解説

<form name="navi">
<select name="contents" onchange="selectNavi()">
  <option>HOME</option>
  <option>JavaScript入門</option>
  <option>ＨＰ作成講座</option>
</select>
</form>

ではまずformから解説していきます。 JavaScriptとformを連動させる場合は、 formタグとselectタグにname属性を指定しなければいけません。 上記ではformタグに「navi」，selectタグに「contents」という名前を付けました（名前は何でも構いません）。 そして選択項目（optionタグ）を３つ設けています。 選択項目が変更になった時onchangeイベントが発生するので、 そこで関数selectNavi()を呼び出します。

var jpURL = new Array(
"https://www.pazru.net/",
"https://www.pazru.net/js/",
"https://www.pazru.net/saku2/"
);

次に、JavaScirpt部分を見ていきます。 まずは配列に、ジャンプ先のURLを指定していきます。 配列jpURLに、optionタグの上から順に対応するURLを記入していって下さい。

function selectNavi(){
  var num;
　
 …
}

次に、リンク先へジャンプさせる関数selectNavi()の宣言です。 最初に変数numを宣言しました。 これは何番目の項目が選択されたかを入れる変数です。

  num = document.navi.contents.selectedIndex;

次にセレクトボックスの何番目の項目が選択されたかを調べます。 documentの後に、formとselectボックスのname属性値が続きます。 最後にselectedIndexを記入します。これが選択項目の番号を取得するものです。 Iが大文字ですから気をつけましょう。

location.href = jpURL[num];

最後はlocation.hrefでジャンプさせます。 ジャンプ先にjpURL[num]を指定することによって、 セレクトボックスの選択項目番号が配列の何番目のURLに該当するかを決定する仕組みです。

一番目の項目を選択した場合

上記スクリプトでは一つ問題があります。 実はHOMEを選んだときに、ジャンプしません。 これは選択項目が変更されていないので（最初からHOMEが選択された状態だから）、onchangeイベントが発生しないからです。 HOME以外のページからHOMEに戻ろうとしても、戻ることができません。

ということでこの問題を解決するために、 optionタグの１番目は「コンテンツ一覧」とかにし、 HOMEを2番目の項目にすると良いでしょう。 以下に修正したスクリプトを載せておきます（赤文字が修正部分）。

<script>

var jpURL = new Array(
"",  //ダミーの項目を一つ追加します
"https://www.pazru.net/",
"https://www.pazru.net/js/",
"https://www.pazru.net/saku2/"
);

function selectNavi(){
  var num;
  num = document.navi.contents.selectedIndex;

  //最初の項目以外が選択された時にジャンプする
  if ( num != 0 ) location.href = jpURL[num];
}

</script>

<form name="navi">
<select name="contents" onchange="selectNavi()">
  <option>コンテンツ一覧</option> 
  <option>HOME</option>
  <option>JavaScript入門</option>
  <option>ＨＰ作成講座</option>
</select>
</form>

サンプル（別窓）

さて、最初の項目を選んでもonchangeイベントが発生しないのであれば、上記のif文は必要無いと思うかもしれません。 しかし別のページに飛んで、ブラウザの戻るボタンで戻ってみるとどうでしょうか。 セレクトボックスの選択項目は、先に選択したものになったままです。 このまま「コンテンツ一覧」を選択するとonchangeイベントが発生してしまう訳です。 このような理由で、最初の項目が選択された場合はジャンプしないようにしておきました。