Javascript:セレクトボックス選択時にページ遷移する

セレクトボックスの値を変更した時に、選択した項目によって別のページ遷移リンク)させたい場合があります。

Javascriptを使用すれば簡単にページ遷移させることが可能です。

JavaScriptonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移するという処理を記述すればOKです。

JavaScriptでページ遷移する方法は「location.href」を使用します。
以前に「location.href」の説明を記述しました。下記に記載しています。

Javascript:locationオブジェクトでURL情報を取得する

セレクトボックス optionタグのvalueの値を「location.href」にセットするようにします。

下記に例を記述します。


セレクトボックス選択時にページ遷移

onChangeはフォームの入力・選択値が変更された時に処理を行うイベントです。

セレクトボックスに「onChange=”location.href=value;”」を記述します。
optionタグのvalue値に遷移させるURLを指定します。

<select onChange="location.href=value;">
    <option value="">---------</option>
    <option value="sample1.html">サンプル1</option>
    <option value="sample2.html">サンプル2</option>
    <option value="http://www.google.co.jp/">Google</option>
    <option value="http://www.yahoo.co.jp/">Yahoo!</option>
</select>

セレクトボックスの値を変更すると、選択した値のURLに遷移することができます。


たまに使いたい時があるのでメモしておきます。