【jQuery】セレクトボックス選択時にページ遷移させる方法
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ライブで気をつけるべきチャットへのコメントマナーまとめ