select要素でプルダウンメニュー選択時にページ遷移を行う方法（サンプルコードあり）

フォームでよく使うselectタグですが、その選択をした時に、ページが遷移するという実装をする機会があったので、忘却録としてサンプルコード付きで解説いたします。

jQueryでページ遷移を行う

だいたい普通のホームページの場合、ページの遷移はaタグのリンクをクリックしたり、フォームなどで送信や確認ボタンなどをクリックすることで発生しますが、selectタグで選択肢の中から選択した瞬間にページ遷移する、というクリック以外のイベントでも、jQueryを使えばページ遷移を制御することができます。

jQueryのサンプルコード

まずはjQueryのサンプルコードです。

$('.target').change(function() {
	if( $(this).val() ) {
		window.location.href = $(this).val();
	}
});

上記の$(this).val()で選択したoptions要素の値が取れます。

htmlのサンプルコード

次にhtmlのサンプルコードです。
下記は、例えば都道府県で絞り込みをして各ページに飛ばすことを想定したソースコードになります。

<select class="target">
	<option value="">選択して下さい。</option>
	<option value="https://東京に関するページ">東京</option>
	<option value="https://神奈川に関するページ">神奈川</option>
	<option value="https://愛知に関するページ">愛知</option>
	<option value="https://大阪に関するページ">大阪</option>
</select>

上記のサンプルコードでは、select要素に先ほどのjQueryのサンプルコードで設定したクラス.target をクラス指定し、選択された値を$(this).val()で取得して、その値のサイトにページ遷移するようにしています。

まとめ

どうでしたか？jQueryを使ってページ遷移を行う方法を簡単に解説してみました。

細かい装飾のcssは省略しましたが、上記のソースコードで実際のページ遷移は簡単に実装できますので、こういう機会があった際は参考になるかなと思います。