为什么 Chrome 在使用后退按钮后不显示选定的 <option> 元素？答案

【问题标题】：Why does Chrome not show a selected <option> element after using the back button?为什么 Chrome 在使用后退按钮后不显示选定的 <option> 元素？
【发布时间】：2012-04-26 13:01:54
【问题描述】：

我有一个 <select> 标记，其中包含一个 <option> 元素：

<select id="someselect">
  <option value="2">B</option>
</select>

单个 <option> 稍后被 jQuery 替换。新的选项列表始终包含旧选项：

selected = $('#someselect').val();
$('#someselect').html('<option value="1">A</option><option value="2">B</option>').val(selected);

这按预期工作。然而，当在谷歌浏览器中离开网页然后点击后退按钮时，会发生一些奇怪的事情。选择标签回到了它的初始状态（有意义），但没有选择单个 <option> 元素！

Chrome 出现这种行为的原因是什么？

我创建了一个最小的工作示例：http://dl.dropbox.com/u/27566470/backdemo.html
最初只有一个<option>。首先点击“点击”替换选项（但保持选择“B”选项），然后点击“谷歌”导航离开，然后使用Chrome的后退按钮查看<select>标签只有一个未选中的选项。

编辑：澄清一下，我对如何解决这个问题不感兴趣。我很好奇为什么 Chrome 会这样工作。使用后退按钮后提供原始（未修改的）DOM 是有道理的，但为什么没有选择唯一的选择选项？

【问题讨论】：

你点击返回，你的页面得到refreshed，你可以通过URL中的GET方法得到它并取得进展或sessions

标签： javascript jquery html google-chrome

【解决方案1】：

回答我自己的问题，这似乎是一个 Chromium 错误。我提交了一个目前已确认和分类的错误：http://code.google.com/p/chromium/issues/detail?id=125509
所以希望这应该在未来得到解决:)

【讨论】：

添加 autocomplete="off" 属性为我解决了这个问题。

【解决方案2】：

因为每个在文档外部导航的浏览器（# 仍在内部）在导航回时它们会加载服务器缓存版本，并且当您选择一个选项时 Chrome 会修改 DOM 将 selected 属性转移到所选选项元素，当你回来时，它会再次加载 selected

【讨论】：

但问题是，当使用后退按钮时，它不会选择原始选定元素（它什么都不选择）。在网站上使用正常刷新时，一切正常。
不，当用户手动返回时，使用B 上的selected 属性加载DOM
是的，选项标签有一个选中的属性，但没有选中：这就是问题所在。 Firefox 会缓存整个修改后的 DOM（因此使用选项“a”和“b”）并显示出来。 Chrome 显示原始 DOM，但它没有选择原始选项。
原来的DOM只有一个选项，叫B，默认是selected。当您返回时，Firefox 使用 A 和 B 获取最新版本的网络，但 Chrome 没有t: Chrome gets the cached server version of the web, and thats why Chrome brings only one option on the select: B` 并且它带有 selected 就像服务器告诉 Chrome 一样。 Chrome，至少在 Mac 和 Windows 上（我可以尝试这两个）按照我告诉你的去做。
这正是我所说的关于 Firefox 部分的内容。但是对于Chrome：确实只有一个选项，但是我回去的时候这里没有选择（修改DOM后）。使用 Chrome 18 在 Windows 和 Linux 上测试。

【解决方案3】：

因为当使用浏览器后退按钮时，它使用页面的缓存版本，但在您的页面中有动态数据丢失，因此浏览器找不到之前选择的值，您可以使用 jQuery 进行设置：

$(document).ready(function(){
     $('#someselect').val('0');
});

【讨论】：