こんにちは。
セレクトボックスのデザインやコンポーネントをリッチにする
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");
}
###デモアプリ
https://myucy.herokuapp.com/select2
###デモアプリのソースコード
https://github.com/myucy/select2-browser-back-issue