阻止Chrome在历史前进/后退时自动填充select字段

这个问题我之前开发时也踩过坑，Chrome的**BF Cache（前进后退缓存）**在恢复页面时，经常会出现「视觉上选中了选项，但DOM的value属性没同步更新」的情况——这就是你用$('#selector').val()拿不到值的核心原因，autocomplete="off"针对的是自动补全逻辑，和BF Cache的页面恢复机制完全不是一回事。

给你几个实测有效的解决方法：

方法一：监听pageshow事件同步选中值 #

当用户通过回退/前进回到页面时，哪怕是从BF Cache加载的页面，Chrome都会触发pageshow事件。我们可以在这个事件里手动同步选中状态到select的value属性：

// 原生JS版本
window.addEventListener('pageshow', function() {
  const selectEl = document.getElementById('selector');
  const selectedOption = selectEl.querySelector('option:checked');
  if (selectedOption && selectedOption.value) {
    selectEl.value = selectedOption.value;
  }
});

// jQuery版本
$(window).on('pageshow', function() {
  const $select = $('#selector');
  const selectedVal = $select.find('option:checked').val();
  if (selectedVal) {
    $select.val(selectedVal);
  }
});

原理很直白：BF Cache恢复页面时，Chrome只还原了视觉层面的选中状态，但没更新select的value属性。我们通过option:checked找到真实选中的选项，手动把它的value赋值给select，这样val()就能拿到正确的值了。

方法二：直接用原生DOM的selectedOptions获取值 #

如果你不想额外写监听事件，也可以放弃jQuery的val()，直接用原生DOM的selectedOptions属性获取选中值，它会实时反映当前的选中状态：

// 原生JS写法
const selectedVal = document.getElementById('selector').selectedOptions[0]?.value;

// jQuery转原生写法
const selectedVal = $('#selector')[0].selectedOptions[0]?.value;

这个方法跳过了可能失效的value属性，直接从选中的option集合里取值，稳定性更高。

方法三：禁用BF Cache（不推荐） #

如果上面的方法都不想用，你也可以通过JS禁用BF Cache，但这会影响页面加载性能，慎用：

window.addEventListener('unload', function() {});

Chrome会因为页面有unload事件监听而放弃使用BF Cache，每次回退前进都会重新加载页面，自然就不会有状态不一致的问题了，但代价是页面加载速度变慢。

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