select下拉框离开页面返回后选中项保留，如何重置为默认值？

问题原因 #

你遇到的是浏览器往返缓存（Back/Forward Cache，简称bfcache）的特性导致的问题。用户点击浏览器返回按钮时，浏览器会直接恢复之前离开页面时的DOM状态，不会重新触发普通的页面加载事件，你写的初始化代码只会在页面首次加载时执行，返回时不会重新运行。
另外你混淆了HTML attribute和DOM property的区别：你用setAttribute('selected', 'true')修改的是HTML标签上的属性，这个只控制页面的初始默认值，用户手动选择选项后修改的是DOM元素的selected property（运行时属性），二者是独立的，只改attribute不会同步更新当前页面的选中状态。

解决方案 #

1. 监听pageshow事件，这个事件在页面首次加载、以及从bfcache恢复时都会触发，保证你的初始化逻辑每次页面展示时都能运行。
2. 直接修改select的value或者selectedIndex属性，不要仅修改option的selected attribute，确保运行时的选中状态同步更新。
3. 可选：给select添加autocomplete="off"属性，避免浏览器自动填充历史选择。

完整代码示例 #

HTML代码：

<select name="country" id="country-select" autocomplete="off">
  <option id="0" value="0">Global</option>
  <option id="1" value="1">United States</option>
  <option id="124" value="124">Canada</option>
</select>

JS代码：

window.addEventListener('pageshow', () => {
  const countrySelect = document.getElementById('country-select');
  // 直接设置value为Canada对应的value值，比写死索引更稳妥
  countrySelect.value = '124';
});

内容的提问来源于stack exchange，提问作者kurtixl