【Select2】 브라우저의 "뒤로"버튼을 누를 때 선택 박스의 선택 상태가 어긋나는 건에 대해

안녕하세요.

선택 상자의 디자인과 구성 요소를 풍부하게 만들기
select2 플러그인에 대해 선택 상자를 선택한 후
브라우저의 뒤로 버튼으로 전환하면 실제 선택 상태와
셀렉트 박스 박스의 표시가 어긋나는 일이 있었으므로,
개선할 수 없는지 조사했습니다.

1. 이벤트

위와 같이 "Language", "age"로 항목을 선택하고 페이지 천이를 한 후에,
브라우저의 돌아가기 기능으로 돌아오면, "Language","age"함께 "none"(초기값)이 표시되고 있지만,
선택 상자를 열면 실제로 "en-us", "40"이 선택되어 표시 내용과 실제 선택 내용이
다르다.

2. 재현 조건

PC의 Chrome 브라우저에서 재현하는지 확인하고 있습니다.
Google 크롬 버전: 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");
}

데모 앱

데모 앱 소스 코드