【JavaScript】セレクトボックス選択でページ遷移（リダイレクト）する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptを使って、セレクトボックスのオプションを選択した際にページ遷移（リダイレクト）する方法をご紹介しています。

セレクトボックスを選択した際にサブミットしたりページ遷移したいと考えた場合、HTMLやCSSだけで実装するのは難しいため、JavaScriptを使用します。

ECサイトや不動産検索サイトで見たことがあるかと思いますが、検索結果を並び替えたり、こだわりの条件で絞り込む際にセレクトボックスを選択してフォームをサブミットさせることがあるかと思いますが、今回は応用としてサブミットではなくリダイレクトを実行してみたいと思います。

では、解説していきます。

JavaScriptでリダイレクトするには

JavaScriptを用いたリダイレクトは「location」インターフェースを使用します。「location.href」にURLを代入すると新しいページに遷移することができます。

使用方法は簡単で、下記の用に右辺のURLを代入するだけになります。

location.href  = 'https://into-the-program.com';

では、早速セレクトボックスを選択してページ遷移（リダイレクト）してみましょう。

セレクトボックスを選択してページ遷移（リダイレクト）する

まずはセレクトボックスの設置から。今回はオプションの値をURLの一部に使用する形でリダイレクトをしてみます。もちろんURLをすべて記述することも可能です。その場合は「option」の「value」属性の値をURLに変更していただければと思います。

HTML

<select id="selectbox" name="selectbox">
    <option value="js">JavaScript</option>
    <option value="jquery">jQuery</option>
    <option value="html">HTML／CSS</option>
</select>

続いてスクリプトを作成していきます。クエリ文字列とハッシュも付加した状態でページ遷移（リダイレクト）するようにしていますが、環境に合わせて変更してご使用ください。

JS

function redirectValue(event) {
        
    let loc = location;
    let value = event.target.value;
        
    if(loc.search !== '')
        value += loc.search;
        
    if(loc.hash !== '')
        value += loc.hash;
        
    location.href = 'https://into-the-program.com/' + value;

    //URLの場合はこちら
    //location.href = value;
}
    
let selectbox = document.getElementById('selectbox');
selectbox.addEventListener('change',redirectValue, false);

最後に

セレクトボックスを用いたリダイレクトはたまに使用することがありますので、本記事で覚書としてまとめてみました。もし同じような処理を実装される方がいましたら参考にしていただければと思います。

以上、JavaScriptでセレクトボックス選択でページ遷移（リダイレクト）する方法のご紹介でした！