Question

考虑一个网页，其中包含一个带有JavaScript事件处理程序的选择菜单，该事件处理程序与菜单的onchange事件相关联，当被触发时，会使用新的查询字符串重新加载页面（使用菜单中选择的值）。

问题：当用户点击“返回”按钮时，页面DOM将从缓存中恢复，但不会选择菜单的状态。

受影响的浏览器： 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加载新网址
点击后退按钮
选项C已恢复，因为它是什么是在之前缓存的 JavaScript /页面重新加载。

所以我认为这不是浏览器无法恢复选择菜单状态的问题，这是时间问题。

Answer 1

这个jQuery代码为我做了诀窍

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

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

Answer 3

AFAIK没有被恢复的原因是DOM不是最后一次缓存加载时缓存中的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>

Answer 4

这是默认情况下以表格形式发生的（不仅仅是选择）：浏览器将保留最后一个值。除非您要使用多个浏览器调试该代码，否则我不会添加任何JavaScript代码来更改此行为。

要解决大多数（所有）现代浏览器中的问题，最简单的解决方案是在autocomplete="off"标签中使用<form>。

修改：请参见答案https://stackoverflow.com/a/14421723/1391963

Answer 5

这里是@Mitch答案的原始JS版本。

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

Here is the performance comparison

Answer 6

截至2020年1月16日，我遇到了一个非常相似的问题，无法在Stackoverflow上找到解决方案。

这是为我解决此问题的原因：

更新Jquery！

我从旧版本（2.x）更新到了3.4.0。之所以选择这个版本，是因为我正在运行bootstrap 3，而更高版本的Jquery完全打破了bootstrap 3的任何高于3.4.0的版本。

我希望这可以节省一些时间。

使用“后退”按钮时，选择菜单未恢复

6 个答案: