セレクトボックスでナビゲーション作成!

HOME
更新日:2013.10.04
HOMEJavaScript入門 > セレクトボックスでナビゲーション

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

前回location.hrefでリンクを貼る方法について学びました。 ではそれを応用して、セレクトボックスによるナビゲーションを作ってみましょう。 セレクトボックスによるナビは時々見かけますよね。

↑こんなタイプのナビです。 目的のものを選択すると、そのページに飛びます(上記のセレクトボックスにはリンクを張っていません)。

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

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

<script>

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

//リンク先へジャンプさせる関数
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>さくさくHP作り</option>
</select>
</form>

サンプル(別窓)

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

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

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

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

document.form名.select名.selectedIndex
セレクトボックスの選択番号を取得する

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

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

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

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

<script>

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

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>さくさくHP作り</option>
</select>
</form>

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

ナビゲーションは外部ファイルで

こうしたナビゲーションを全てのページに置いておくと親切ですが、 全てのページにform,select,optionを記入するのも面倒です。 optionの数が上記のように3つということは無く、普通はもっと多いからです。 コンテンツを追加した場合は全てのページを修正することになり大変です。

そんな時は、全てを外部ファイルで操作しましょう。 フォーム関連のタグもdocument.write()で書き出してしまえばいいわけです。 外部ファイルを1つ作っておけば、各ページから読み込んですぐにナビを設置できます。 修正も外部ファイルのみ変えればOKです。

外部ファイルの例(別窓) サンプル(別窓)

あとは各ページから外部ファイルにリンクし、目的の場所で関数formWrite()を呼び出せばOKですね。 因みにformWrite()内でdocument.write()が頻出していますが、 配列とfor文を使えばもう少しすっきりさせることが可能です。