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

Why does Chrome not show a selected <option> element after using the back button?

本文关键字：元素 选项 显示 Chrome 按钮 为什么      更新时间：2023-09-26

我有一个包含单个<option>元素的<select>标签：

<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"选项），然后单击"Google"以导航离开，然后使用 Chrome 的后退按钮查看只有一个未选择的选项的 <select> 标记。

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

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

修复

因为每个在文档外部导航的浏览器（# 仍在内部）在导航时都会加载服务器缓存版本，并且当您选择一个selected选项时，Chrome 会修改 DOM，当您返回时，它会再次加载selected

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

$(document).ready(function(){
     $('#someselect').val('0');
});
相关文章：