【jQuery】セレクトボックス選択時にページ遷移させる方法

Programming Web

Web制作者

Web制作者
「セレクトボックスを選んだら、選択肢と紐付いたページに直接遷移させたいけど、やり方を知りたい。jQueryを使ってできないかなぁ…?」

こういった疑問にお答えします。

本記事の内容

  • jQueryでセレクトボックスを選択時にページ遷移させる方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。現在はmineblogを一人で運営しています。
Web制作歴は7年になります。

Web制作をしている中で、セレクトボックス(プルダウンメニュー)選択した時に、自動的にページ遷移させるというケースがありました。

その方法を詳しく紹介します。

セレクトボックス選択時の直接ページ遷移について考える

考える

セレクトボックス選択時の直接ページ遷移について少し考えてみます。

メリットとデメリット

メリット・デメリットについて説明します。
その上で、jQuery(javaScript)を使用して直接ページ遷移を実装するかどうかを決めると良いです。

メリット

直接ページ遷移させることで、選択→ボタンクリックでページ遷移させるよりもユーザーの手間を減らせる。

デメリット

セレクトボックス(プルダウンメニュー)で選択した時に有無を言わさずページ遷移するので、ユーザーが困惑する可能性がある。
ページ遷移するかどうかのアラートなどを表示する必要があるかもしれない。

セレクトボックスの仕様を決める

セレクトボックス選択時の直接ページ遷移させる機能の仕様は下記の通りです。

仕様

  • 設置するのはセレクトボックスのみ
  • セレクトボックスではmineblogの記事カテゴリを選択可能
  • カテゴリを選択したら、そのカテゴリにページ遷移する

これを踏まえて実装方法を詳しく説明します。

実装方法

実装手順

HTML、CSS、jQueryの実装方法をそれぞれ詳しく説明します。

HTML

まずはhtmlでコーディングします。下記のコードをご覧ください。

<div id="select-pagejump">
    <form method="post" name="category_list">
        <select id="blogcategory_list">
            <option value="web">Web</option>
            <option value="blog">Blog</option>
            <option value="business">Business</option>
            <option value="life">Life</option>
            <option value="gourmet">Gourmet</option>
        </select>
    </form>
</div>

<select>タグにblogcategory_listというid名をふっておきます。

次に、<select>タグ内で<option>タグで選択項目を記述します。

ここでは、mineblogのカテゴリ「Web、Blog、Business、Life、Gourmet」のカテゴリを用意しました。

<option>タグのvalue属性には各カテゴリページのURLとなる文字列を入れておきます(後にjQueryのコードで使用します)。

CSS

HTMLでコーディングしたら、必要に応じてCSSでセレクトボックス(プルダウンメニュー)を装飾します。ここでは、分かりやすいようにセレクトボックス(プルダウンメニュー)のを少し大きめにしています。

#select-pagejump #blogcategory_list {
    border: 1px solid #999999;
    font-size: 21px;
    padding: 5px;
    width: 250px;
    border-radius: 5px;
}
特に今回はこだわらないので、自由に装飾してください。

jQuery

jQueryを使って、実際に動きを実装します。

<head>内に記述

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

上記コードをheadタグ内に記述して、jQueryを読み込みます。

選択時のページ遷移部分

$("#blogcategory_list").change(function () {
    var category = $(this).val();
    if(category == "web"){
        window.location.href = 'https://to-benefit7.com/category/web/';
    }else if(category == "blog"){
        window.location.href = 'https://to-benefit7.com/category/blog/';
    }else if(category == "business"){
        window.location.href = 'https://to-benefit7.com/category/business/';
    }else if(category == "life"){
        window.location.href = 'https://to-benefit7.com/category/life/';
    }else if(category == "gourmet"){
        window.location.href = 'https://to-benefit7.com/category/gourmet/';
    }
});

.change()メソッドを使用して、セレクトボックス(プルダウンメニュー)の項目を変更した時にアクションが起こるように設定します。

.change()メソッド中のfunctionでは、window.location.hrefプロパティを使用して、ページ遷移を実現します。

window.location.href = 'パス名'

このように、パス名を指定するだけであとは勝手にページ遷移してくれます。

上記のjavaScriptのコードでは、optionタグで設定したvalueの値によって、遷移先のURLが変わるようにしています。
categoryという変数に選択されたoptionタグのvalueの値を格納して、if文で分岐させています。

コードを簡潔に書ける

$("#blogcategory_list").change(function () {
    window.location.href = 'https://to-benefit7.com/category/' + $(this).val() + '/';
});

ちなみに今回は、mineblogのURLであるhttps://to-benefit7.com/に続くURLとoptionタグのvalueの値を対応させているので、上記のようにvalueの値をパスと連結させることで、簡潔なコードにすることもできます。

状況に応じて使い分けるといいでしょう。

まとめ

セレクトボックス選択時に直接ページ遷移させる方法について再度まとめます。

ポイント

  • HTMLにはselectタグ、optionタグを使用する
  • jQuery(JavaScript)では.change()メソッド、window.location.hrefプロパティを使用する

最終的には、非常にシンプルなコードでセレクトボックス(プルダウンメニュー)選択時のページ遷移を実装することができます。もし必要になれば参考にしてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】