セレクトボックスの選択時に・・・
- 選択されたページに遷移したり、
- カテゴリーページに移動させたり、
こういう処理は少しコードを追加すればできます。
jQueryでのやり方とコード例をまとめました。
またjQueryなしでJavaScriptだけ行う方法も一緒に紹介。
jQueryでselect選択時にページ遷移を行う
まずはjQueryを使った方法から。
やり方自体は超簡単です。
一例を出すなら次のような実装ができます。
１．value属性にURLを持つselect要素作成
▼ たとえばこういう要素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<select id="search-engines"> <option value="" selected> どこに行きたい？ </option> <option value="https://google.co.jp"> Google </option> <option value="https://yahoo.co.jp"> Yhaoo </option> <option value="https://www.bing.com/"> Bing </option> </select> |
本当に value に対してURLを渡すだけ。
そして項目選択時に飛ぶというイメージです。
でもこのままだと当然ながら動きません。
２．選択時にページ遷移を行うコード追加
次みたいなページ遷移を行うコードを追加しました。
▼ このようなコード
|
1 2 3 4 5 6 7 |
$(function(){ $('#search-engines').on('change', function(){ if($(this).val() != ''){ location.href = $(this).val(); } }); }); |
セレクトボックスの選択状態が変化すると 'change' がイベント発火するので、それを受け取ったら location.href = $(this).val() のようにページ遷移を行うだけ。
選択状態が変われば、対応するページに飛ばせます。
JavaScirptのみで選択時のページ遷移を行う
もちろんjQueryなしでも同じことは可能
JavaScriptのみなら、次の手順でできました。
１．value属性にURLを持つselect要素作成
▼ 再程と同じなので一部省略
|
1 2 3 4 5 6 7 8 9 |
<select id="search-engines"> <option value="" selected> どこに行きたい？ </option> <option value="https://google.co.jp"> Google </option> <!-- 以下略... --> </select> |
２．選択時にページ遷移を行うコード追加
jQueryを使わない場合のコード、こういう感じです。
▼ JavaScriptのみのコード例
|
1 2 3 4 5 6 |
document.getElementById('search-engines') .addEventListener('change', function(){ if(this.value != ''){ location.href = this.value; } }); |
jQueryを使わないなら addEventListener でchangeイベントを監視、あとは location.href = this.value のようにページ遷移を行うだけです。
これで先ほどと同じページ遷移ができました。
ここまでのまとめ
やり方自体はとっても簡単です。
jQueryを使うかどうかに関わらず、１．changeイベントを監視 ＝＞ ２．選択状態のoption要素の値を取得 ＝＞ ３．location.hrefにその値を代入 みたいな流れ
以上、セレクトボックス選択時のページ遷移でした。ではまた
