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に遷移することができます。


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

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

JavascriptでアクセスしているURL情報を取得する場合、
locationオブジェクトを使用すれば簡単に取得することができます。

URLホスト名アンカーなど色々な情報を取得することができます。
また指定したURLに移動することもできます。

下記にlocationオブジェクトの機能や使用例をメモします。


locationオブジェクトの機能説明

※下記URLでアクセスした場合
「http://www.hoge.com/location/index.html?aaa=100#test」


location.href

現在アクセスしているURLを取得します。
また、指定したURLに遷移します。

・URLを取得

var url = location.href;
alert(url);

【実行結果】

http://www.hoge.com/location/index.html?aaa=100#test

・指定したURLに遷移

location.href = 'http://google.co.jp';

指定したURLに遷移します。


location.host
location.hostname

現在アクセスしているホスト情報を取得します。

・ホスト情報を取得(host)

var host = location.host;
alert(host);

【実行結果】

www.hoge.com

・ホスト情報を取得(hostname)

var hostname = location.hostname;
alert(hostname);

【実行結果】

www.hoge.com

location.hash

現在アクセスしているアンカーを取得します。
また、指定したアンカーに移動します。

・アンカーを取得

var hash = location.hash;
alert(hash);

【実行結果】

#test

location.port

現在アクセスしているポート番号を取得します。


location.protocol

現在アクセスしているプロトコルを取得します。

var protocol = location.protocol;
alert(protocol);

【実行結果】

http:

location.pathname

現在アクセスしているパス情報を取得します。

var pathname = location.pathname;
alert(pathname);

【実行結果】

/location/index.html

location.search

現在アクセスしているパラメータ情報を取得します。

var parameter = location.search;
alert(parameter);

【実行結果】

?aaa=100