jQueryでセレクトボックス選択時にページ遷移・移動を行う

セレクトボックスの選択時に・・・

  • 選択されたページに遷移したり、
  • カテゴリーページに移動させたり、

こういう処理は少しコードを追加すればできます。

jQueryでのやり方とコード例をまとめました。
またjQueryなしでJavaScriptだけ行う方法も一緒に紹介。

jQueryでselect選択時にページ遷移を行う

まずはjQueryを使った方法から。

やり方自体は超簡単です。

一例を出すなら次のような実装ができます。

 

1.value属性にURLを持つselect要素作成

▼ たとえばこういう要素

本当に value  に対してURLを渡すだけ。

そして項目選択時に飛ぶというイメージです。

でもこのままだと当然ながら動きません。

 

2.選択時にページ遷移を行うコード追加

次みたいなページ遷移を行うコードを追加しました。

▼ このようなコード

セレクトボックスの選択状態が変化すると 'change'  がイベント発火するので、それを受け取ったら location.href = $(this).val()  のようにページ遷移を行うだけ。

選択状態が変われば、対応するページに飛ばせます。

JavaScirptのみで選択時のページ遷移を行う

もちろんjQueryなしでも同じことは可能

JavaScriptのみなら、次の手順でできました。

 

1.value属性にURLを持つselect要素作成

▼ 再程と同じなので一部省略

 

2.選択時にページ遷移を行うコード追加

jQueryを使わない場合のコード、こういう感じです。

▼ JavaScriptのみのコード例

jQueryを使わないなら addEventListener  でchangeイベントを監視、あとは location.href = this.value  のようにページ遷移を行うだけです。

これで先ほどと同じページ遷移ができました。

ここまでのまとめ

やり方自体はとっても簡単です。

jQueryを使うかどうかに関わらず、1.changeイベントを監視 => 2.選択状態のoption要素の値を取得 => 3.location.hrefにその値を代入 みたいな流れ

以上、セレクトボックス選択時のページ遷移でした。ではまた