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

IT・Web

フォームでよく使う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は省略しましたが、上記のソースコードで実際のページ遷移は簡単に実装できますので、こういう機会があった際は参考になるかなと思います。

sanpo-zukan

sanpo-zukan

ストアカで『【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室( https://www.street-academy.com/myclass/78668 )』運営中!

関連記事

特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


sanpo-zukan

sanpo-zukan

当サイト(さんぽずかん)を運営しています「しゃむ」です。 役立つ情報からしょうもないネタまで、少しでも読んだ人の役に立てばいいなと思って、いろいろな記事を掲載していきます!

最近の記事

  1. カスタム投稿タイプのアーカイブ一覧ページを作成する

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

  3. VScodeのマウスホバー時に表示される邪魔なポップアップみたいなのを非表示にする方法

  4. PR

    【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室

新着 オススメ 特集記事
  1. カスタム投稿タイプのアーカイブ一覧ページを作成する

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

  3. VScodeのマウスホバー時に表示される邪魔なポップアップみたいなのを非表示にする方法

  1. Flexboxでjustify-content: space-betweenの最後の要素を左寄せにする方法

  2. しまった!アップグレードしたらサイトの表示が崩れた!!WordPressをダウングレードするカンタンな方法とは?

  3. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  1. GoogleAdsenseで口座確認のデポジットがなかなか入金されなかったとき確認すべき点

  2. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  3. ネコ好きLINEユーザー必見!懲りずに第二弾はスタンプ8個でお手軽LINEスタンプ!「ゆるかわミケにゃん」販売開始!

TOP