Выберите меню, не восстанавливаемое при использовании кнопки "Назад"

Рассмотрим веб-страницу, в которой есть меню выбора с обработчиком событий JavaScript, связанным с событием обмена в меню, которое при запуске перезагружает страницу новой строкой запроса (используя значение, выбранное в меню).

Проблема:, когда пользователь нажимает кнопку "Назад" , страница DOM восстанавливается из кеша, но NOT состояние меню выбора.

Браузеры затронуты: Firefox и Safari (которые используют кеш обратно/вперед)

Пример:

<script language="javascript" type="text/javascript">
function reloadPage() {
    var menu = document.getElementById("select1");
    var val = menu.options[menu.selectedIndex].value;
    window.location.href = 'test.html?select1=' + val;
} 
</script>
<form action="#" method="get" name="form1">
    <select name="select1" id="select1" onChange="reloadPage();">
    <option value="A" selected>Option A</option>
    <option value="B">Option B</option>
    <option value="C">Option C</option>
    <option value="D">Option D</option>         
    </select>
</form>

Просмотрите эту страницу и обратите внимание, что выбрана опция A. Затем выберите другой вариант (например, вариант C) - страница перезагружается (с помощью строки запроса, select1 = C). Затем нажмите кнопку "Назад" - меню выбора продолжит отображение опции C, выбранной.

Вопрос: Кто-нибудь знает, почему меню выбора не восстановлено и как можно решить эту проблему? Я использовал JavaScript в прошлом, чтобы заставить поля формы на странице соответствовать строке запроса, но есть проблемы с этим подходом (например, FF и Safari обычно не запускают событие onload для окна при загрузке страницы из кеш), и это кажется мне взломом.

Любые предложения?

Обновление: Мне только пришло в голову, что может произойти следующее:

• выбрана опция C
• страница кэшируется
• JavaScript загружает новый URL
• нажмите кнопку "Назад"
• опция C восстанавливается, поскольку она что было кэшировано до Перезагрузка JavaScript/страницы.

Итак, я думаю, что это не проблема браузера, не восстанавливающего состояние меню выбора, это проблема времени.

Ответы

$(document).ready(function () {
    $("select").each(function () {
        $(this).val($(this).find('option[selected]').val());
    });
})

$(document).ready(function () {
  $('select').each(function () {
    var select = $(this);
    var selectedValue = select.find('option[selected]').val();

    if (selectedValue) {
      select.val(selectedValue);
    } else {
      select.prop('selectedIndex', 0);
    }
  });
});

<script type="javascript">
  function fix_selects(){
    //do something here to ensure that the select is setup how you want. 
    //Maybe using a window location hash?
  }
  fix_selects();
</script>

let selects = document.getElementsByTagName('select');

for (let i = 0; i < selects.length; ++i) {
    let currentSelect = selects[i];
    let selectedOption = currentSelect.querySelector('option[selected]');
    if (selectedOption) currentSelect.value = selectedOption.value;
}