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

Рассмотрим веб-страницу, в которой есть меню выбора с обработчиком событий 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/страницы.

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

Ответ 1

Этот код jQuery помогло

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

Ответ 2

Отрывок из @frakhoffy работал у меня, но нарушил нормальное поведение в Chrome. При попадании страницы без выбранной опции выбор был пустым, даже если в выборе нет пустого параметра. Я закончил с:

$(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);
    }
  });
});

Ответ 3

AFAIK причина, по которой он не восстанавливается, заключается в том, что DOM не тот, который был в кеше при последнем загрузке кеша. Браузер восстанавливает то, что кешированный объект находился на обратной стороне страницы. Вы должны поддерживать себя самостоятельно.

Я бы предложил поместить функцию в тело, которое всегда будет выполняться по мере анализа DOM (но у меня нет настройки окружения для тестирования этого сценария, поэтому я иду на свой детектив "он должен работать" )

<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>

Ответ 4

Вот ванильная JS-версия ответа @Mitch.

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;
}

Вот сравнение производительности

Ответ 5

Это то, что происходит по умолчанию в формах (а не просто выбирает): браузер сохранит последние значения. Я бы не стал добавлять код JavaScript для изменения этого поведения, если вы не хотите отлаживать этот код в нескольких браузерах.

Самым простым решением, которое решило бы проблему в большинстве (всех?) Современных браузеров, является использование autocomplete="off" в теге <form>.

Изменить: см. ответ fooobar.com/info/442638/...