使用后退按钮时选择菜单未恢复答案

【问题标题】：Select menu not being restored when Back button used使用后退按钮时选择菜单未恢复
【发布时间】：2011-05-21 05:26:25
【问题描述】：

考虑一个网页，它有一个带有 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 在从缓存），这对我来说似乎是一个黑客攻击。

有什么建议吗？

更新：我刚刚想到可能会发生以下情况：

选项 C 被选中
页面已缓存
JavaScript 加载新 URL
点击返回按钮
选项 C 已恢复，因为它是之前缓存的内容 JavaScript/页面重新加载。

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

【问题讨论】：

你有没有成功解决过这个问题？您还需要这方面的帮助吗？

标签： javascript

【解决方案1】：

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>

【讨论】：

【解决方案2】：

这个 jQuery 代码帮了我大忙

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

【讨论】：

成功了！出于某种原因 :selected 不会在后退按钮上实现，但使用“selected”属性的 option[selected] 会实现。我猜这与整个属性与属性有关？
非常好，但还要注意@Mitch 下面的小而重要的改进：stackoverflow.com/a/28302447/349974

【解决方案3】：

@frakhoffy 的 sn-p 对我有用，但破坏了 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);
    }
  });
});

【讨论】：

我最终使用了没有else 声明的代码，它对我有用
这让我大吃一惊。谢谢！这对我有用。

【解决方案4】：

这是@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

【讨论】：

【解决方案5】：

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

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

编辑：见答案https://stackoverflow.com/a/14421723/1391963

【讨论】：

【解决方案6】：

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

以下是为我解决此问题的方法：

更新 Jquery！

我从旧版本 (2.x) 更新到 3.4.0。我使用了这个版本，因为我运行的是 bootstrap 3，而较新版本的 Jquery 完全破坏了 bootstrap 3，任何高于 3.4.0 的版本。

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

【讨论】：