【问题标题】：Chrome 77 caching <select> selected option, even with autocomplete="off"Chrome 77 缓存 <select> 选择的选项，即使使用 autocomplete="off"
【发布时间】：2019-10-16 17:03:33
【问题描述】：

如果<select> 元素具有selected 选项，Chrome 将忽略该选定选项，即使在使用浏览器的“导航返回”功能时<select> 元素上的autocomplete="off" 也是如此。我发现的一种解决方法是将选择包装在 <form> 中，但我不希望在我的 html 中包含无关的表单。

问题：有没有办法在 Chrome 中解决这个问题而不用包装在表单元素中？（Firefox不会出现此行为，其他浏览器未测试）

使用 Chrome 77 进行重现：

1.) 访问这个 jsfiddle，并将两个选择更改为“一个”。请注意，“Two”是两者的选定选项，因此当页面加载时，这应该在两个元素中都被选中

2.) 点击链接到google（页面导航实际上不会发生，jsfiddle 输出实际上不能导航到网页）

3.) 鼠标点击 jsfiddle 输出后，点击浏览器的后退按钮

4.) 您会注意到，包装在表单中的 select 元素默认选择了正确的元素，“Two”。未包装在表单中的 select 元素选择了不正确的元素，“One”

https://jsfiddle.net/m5hg8n40/1/

<!-- chrome ignores 'selected' -->
<select autocomplete="off">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
</select>

<br><br>
<a href="https://google.com">google.com</a>
<br><br>

<!-- chrome obeys 'selected' -->
<form autocomplete="off">
  <select>
    <option value="1">One</option>
    <option value="2" selected>Two</option>
  </select>
</form>

【问题讨论】：

标签： html google-chrome

【解决方案1】：

MAC OS Catalina 10.15

浏览器

谷歌浏览器 版本 77.0.3865.120（官方版本）（64 位）
Safari 版本 13.0.2 (15608.2.30.1.1)
火狐 70.0

测试的操作：

加载 jsfiddle 我看到两者都选择了two 选项
如果我点击谷歌链接并返回，两者都会保持two被选中
如果我将第一个选择（不带表单）修改为one，去谷歌去回来，它保持one被选中
如果我将第二个选择（带表单）修改为one，请转到 google，然后转到返回，它会显示two 选项被选中

据我所知。加载时两者都适用，但window History 对待两个输入选择略有不同，如果它们被包裹在<form>tag 中

一个会保留执行的最后一个动作，另一个会优先考虑表单的输入，将其输入重置为默认状态。

例外：Firefox 以相同的行为对待两者（就像没有表单一样）

对我来说，如果需要，在此处使用标签似乎是合法的，即使它们将在本地或远程使用，它们也可用于收集数据。（并不比到处都有 1047248 <div> 和零 semantic HTML 的页面差）所以我认为这真的取决于你。如果您需要以另一种方式存储数据，您可以使用 LocalStorage

【讨论】：

【解决方案2】：

我觉得没有js什么都做不了。

<body onload="document.querySelector('select').value = document.querySelector('select [selected]').value">
<select>
  <option value="1">One</option>
  <option value="2" selected>Two</option>
</select>

<br><br>
<a href="https://google.com">google.com</a>
<br><br>

<form autocomplete="off">
  <select>
    <option value="1">One</option>
    <option value="2" selected>Two</option>
  </select>
</form>
</body>

【讨论】：