セレクトボックスでナビゲーション作成
前回location.hrefでリンクを貼る方法について学びました。 ではそれを応用して、セレクトボックスによるナビゲーションを作ってみましょう。 セレクトボックスによるナビは時々見かけますよね。
↑こんなタイプのナビです。 目的のものを選択すると、そのページに飛びます（上記のセレクトボックスにはリンクを張っていません）。
セレクトボックスでリンク先を指定する
では実際にソースの書き方を解説します。 以下のような関数とフォームを、body内の表示したい部分に記入しましょう。 勿論関数類はヘッダーでも構いません。
<script type="text/javascript"> <!-- //セレクトボックスに対応するリンク先を配列に入れる 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>さくさくＨＰ作り</option> </select> </form>
サンプル（別窓）
ではまずformから解説していきます。 JavaScriptとformを連動させる場合は、 formタグとselectタグにname属性を指定しなければいけません。 上記ではformタグに「navi」，selectタグに「contents」という名前を付けました（名前は何でも構いません）。 そして選択項目（optionタグ）を３つ設けています。 選択項目が変更になった時onchangeイベントが発生するので、 そこで関数SelectNavi()を呼び出します。
次に、JavaScirpt部分を見ていきます。 まずは配列に、ジャンプ先のURLを指定していきます。 配列jpURLに、optionタグの上から順に対応するURLを記入していって下さい。
次に、リンク先へジャンプさせる関数SelectNavi()の宣言です。 最初に変数numを宣言しました。 これは何番目の項目が選択されたかを入れる変数です。
次にセレクトボックスの何番目の項目が選択されたかを調べます。 documentの後に、formとselectボックスのname属性値が続きます。 最後にselectedIndexを記入します。これが選択項目の番号を取得するものです。 Iが大文字ですから気をつけましょう。
document.(formのname属性値).(selectのname属性値).selectedIndex;
最後はlocation.hrefでジャンプさせます。 ジャンプ先にjpURL[num]を指定することによって、 セレクトボックスの選択項目番号が配列の何番目のURLに該当するかを決定する仕組みです。
ナビゲーションは外部ファイルで
こうしたナビゲーションを全てのページに置いておくと、ビジターに親切ですね。 しかし全てのページにform,select,optionを記入するのも面倒です。 optionの数が上記のように３つということは無く、普通はもっと多いからです。 コンテンツを追加した場合は全てのページを修正することになり大変です。
そんな時は、全てを外部ファイルで操作しましょう。 フォーム関連のタグもdocument.write()で書き出してしまえばいいわけです。 外部ファイルを１つ作っておけば、各ページから読み込んですぐにナビを設置できます。 修正も外部ファイルのみ変えればＯＫです。
しかし、全てのページに同じタグを書くと不具合が生じる場合があります。 例えば上記のサンプルでHOMEを選んで下さい。ジャンプしませんね。 これは選択項目が変更されなかったので、onchangeイベントが発生しないからです。 HOME以外のページからHOMEに戻ろうとしても、戻ることができません。
ということでこの問題を解決するために、 optionタグの１番目は「コンテンツ一覧」とかにし、 リンクを張らないでおくと良いでしょう。 以下のリンク先に、問題を修正した状態の外部ファイルの記入例を載せておきます。
optionタグに１項目追加しています。 連動してjpURL配列も１番目にダミーを作ります。 リンクさせるときは、 if文を使って１番目の項目（numが0）が選択された場合はリンクしないようにしています。
あとは各ページから外部ファイルにリンクし、目的の場所で関数FormWrite()を呼び出せばＯＫですね。 因みにFormWrite()内でdocument.write()が頻出していますが、 配列とfor文を使えばもう少しすっきりしますよ。