3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

こんにちは。

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

1.事象

wr2bh-5achk.gif

上記通り、"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 で保持している値を再選択するようにしたところ、うまいこと改善しました。

l6huw-dn7a8.gif

ソース


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

3
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?