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

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

できます。
詳しく説明しますね。
本記事の内容
- jQueryでセレクトボックスを選択時にページ遷移させる方法
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のドメインプロテクションは必要か【採算がとれるか】