セレクトボックスのchangeイベントで遷移した場合のブラウザバックの制御

はじめに

セレクトボックスのchangeイベントで
ページ遷移するよう実装した場合のブラウザバック時の制御についてまとめました

問題

セレクトボックスを変更した(changeイベント)でページ遷移をした場合、
ブラウザバックでセレクトボックスの選択が初期化されない

例

...
<select class="target">
    <option class="option1" value="1">1</option>
    <option class="option2" selected value="2">2</option>
    <option class="option3" value="3">3</option>
</select>
...

const target = document.querySelector(".target");

target.addEventListener('change', function(e) {
    // 任意のURLに遷移
});

1. ページアクセス時はセレクトボックスは .option2が選択されている状態
2. セレクトボックスの値を変更 .option2 → .option1
3. ページ遷移
4. ブラウザバック
5. セレクトボックスは.option1が選択された状態になってしまう

.option2が選択されている状態にしたい

対策

Window: pageshow イベントを利用する

pageshow イベントとは

pageshow イベントは、操作によってブラウザーがウィンドウの文書を表示したときに Window へ送られます。これには以下のようなものがあります。

最初にページを読み込んだとき
同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき
モバイル OS で凍結されたページを復元したとき
ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき

サンプル

// const target = document.querySelector(".target");


window.addEventListener('pageshow', function() {
    target.value = target.querySelector('.target option[selected]').value);
});

サンプル ※jQuery利用

$(window).on('pageshow', function() {
    $('.target').val($('.target option["selected"]').val());
});

※option:selectedの書き方だと、.option1の値が取得されてしまう

さいごに

pageshowイベントはあまり馴染みがなかったですが、
このイベントを利用することで対応できました