×

javaScript(jQuery)でセレクトボックス(プルダウンメニュー)選択時に直接ページ遷移させる方法

2016年5月22日 コーディング

ブルーインパルスが飛ぶ

セレクトボックス(プルダウンメニュー)選択した時に直接ページ遷移させたい時ありませんか?

セレクトボックス(プルダウンメニュー)選択時の直接ページ遷移のメリット・デメリットは下記のとおり。

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

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

これらを踏まえて、javaScript(jQuery)を使用して直接ページ遷移を実装します。

サンプルで動作を確認

まずはDEMOをクリックしてサンプルで動作を確認してください。

DEMO

migoブログのカテゴリを選択できるようになっており、選択したカテゴリページにページ遷移するようになっています。

htmlでコーディング

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

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

次に、selectタグ内でoptionタグで選択項目を記述します。今回はmigoブログのカテゴリ「web、グルメ、旅行、生活、その他」の5カテゴリを用意します。

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

CSSで装飾する

htmlでコーディングしたら、必要に応じてCSSでセレクトボックス(プルダウンメニュー)を装飾します。

#select-pagejump #blogcategory_list {
	border: 1px solid #999999;
	font-size: 21px;
	padding: 5px;
	width: 250px;
	border-radius: 5px;
}

ここでは、分かりやすいようにセレクトボックス(プルダウンメニュー)のを少し大きめにしています。

javaScript(jQuery)でセレクトボックス(プルダウンメニュー)選択時に指定したURLへページ遷移させる

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



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


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

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

window.location.href = ‘パス名’

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

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


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

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

まとめ

今回は、htmlでは主にselectタグ、optionタグといったフォームタグ、javascriptでは.change()メソッド、window.location.hrefプロパティを使用しました。

見てわかるように非常にシンプルなコードでセレクトボックス(プルダウンメニュー)選択時のページ遷移を実装することができます。

関連記事