【Select2】ブラウザの"戻る"ボタン押下時にセレクトボックスの選択状態がズレる件について

3271 ワード
Chrome JavaScript jQuery Select2 JavaScript テキストリンク

こんにちは。

セレクトボックスのデザインやコンポーネントをリッチにする
select2プラグインについて、セレクトボックスを選択後に
ブラウザの戻るボタンで遷移をすると、実際の選択状況と
セレクトボックスボックスの表示がズレることがあったので、
改善できないか調査しました。

1.事象

上記通り、"Language","age"で項目を選択して、ページ遷移を行った後に、
ブラウザの戻る機能で戻ってくると、"Language","age"共に"none"（初期値）が表示されているが、
セレクトボックスを開くと実際には"en-us","40"が選択されており、表示内容と実際の選択内容が
異なっている。

2.再現条件

PCのChromeブラウザで再現することを確認しています。
Google Chromeバージョン: 84.0.4147.135（Official Build） （64 ビット）
※バージョン70台から再現していた記憶があります
FireFoxやMac OS用Safari、iOS用Safari等では挙動に差はあるものの再現しませんでした。

3.解決

似たようなことを報告している方もいましたが、
すでに提示されている改善策では、自分の手元ではうまく動作しなかったため、ページの再読み込み時に
window.onload で保持している値を再選択するようにしたところ、うまいこと改善しました。

ソース


window.onload = function () {
var age = $("#age").val()
$("#age").val(age).trigger("change");

var Language = $("#Language").val()
$("#Language").val(Language).trigger("change");
}

デモアプリ

デモアプリのソースコード