下拉菜单返回页面后未显示正确选中项的修复咨询

这个问题是浏览器的**往返缓存（BF Cache）**导致的——浏览器为了提升回退/前进的加载速度，会保存页面的交互状态（包括下拉框的选中值），返回时直接复用缓存状态，忽略HTML里标记的selected属性。

可以通过以下两种方法修复：

方法一：监听pageshow事件匹配当前页面 #

每次页面显示（包括从BF Cache返回）时，强制将下拉框选中项设置为当前页面对应的选项：

<div id="drop">         
    <select name="year" id="year" onchange="location = this.value;">
        <option value="sermons-2023.html" selected>2023</option>
        <option value="sermons-2022.html">2022</option>
        <option value="sermons-2021.html">2021</option>
        <option value="sermons-2020.html">2020</option>
        <option value="sermons-2019.html">2019</option>
        <option value="sermons-2018.html">2018</option>
        <option value="sermons-2017.html">2017</option>
        <option value="sermons-2016.html">2016</option>
        <option value="sermons-2015.html">2015</option>
    </select>
</div>

<script>
window.addEventListener('pageshow', function() {
    const yearSelect = document.getElementById('year');
    // 获取当前页面的文件名（如sermons-2023.html）
    const currentPage = window.location.pathname.split('/').pop();
    
    // 遍历选项，匹配当前页面并设置选中
    for (const option of yearSelect.options) {
        if (option.value === currentPage) {
            option.selected = true;
            break;
        }
    }
});
</script>

这种方法能确保下拉框显示的是当前页面对应的年份，适配所有页面的默认选中需求。

方法二：强制选中HTML标记的默认选项 #

如果希望严格复用HTML里标记selected的选项，可直接定位该选项并设置选中：

window.addEventListener('pageshow', function() {
    const yearSelect = document.getElementById('year');
    const defaultOption = yearSelect.querySelector('option[selected]');
    if (defaultOption) {
        defaultOption.selected = true;
    }
});

补充说明 #

• 不建议禁用BF Cache（比如绑定unload事件），会降低页面回退的加载速度。
• 给select添加autocomplete="off"在部分浏览器中可能生效，但兼容性不如pageshow事件可靠。

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