点击后退按钮时如何将 <select> 元素更改回默认值？

Question

我有一个<select> 元素，用于导航。您单击它以选择要转到的页面，然后单击它会转到该页面。这是它的代码：

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="/item1" selected>Item 1</option>
    <option value="/item2" selected>Item 2</option>
    <option value="/item3" selected>Item 3</option>
</select>

当我使用它时，它会正确进入页面，但是当点击后退按钮时，下拉菜单中已经选择了我去的页面。比如我在第 1 项，然后选择第 2 项，然后通过浏览器的返回按钮回到第 1 项，在列表中选择第 2 项，这有点混乱。

如何让它切换回默认值？

Answer 1

您可以将选择框重置为默认值，然后导航到新页面。这是一个如何做到这一点的示例。

<script>
fix_ipad = function(evt){
    go_to = document.getElementById('go_to');
    go_to.selectedIndex = 0; // reset to default value before leaving current page
};

window.addEventListener("pagehide",fix_ipad,false);

goto_page_and_reset_default = function(){
    go_to = document.getElementById('go_to');
    go_to_page = go_to.value;
    go_to.selectedIndex = 0; // reset to default value before leaving current page

    window.open(go_to_page,"_top");    

}
</script>

<select onchange="goto_page_and_reset_default()" id='go_to'>
    <option value="/item1" selected>Item 1</option>
    <option value="/item2" selected>Item 2</option>
    <option value="/item3" selected>Item 3</option>
</select>

Answer 2

可能重复https://stackoverflow.com/questions/8861181

现代浏览器实现了一种称为后向缓存 (BFCache) 的东西。当您点击后退/前进按钮时，实际页面不会重新加载（并且脚本永远不会重新运行）。

如果您必须在用户点击后退/前进键的情况下执行某些操作 - 侦听 BFCache pageshow 和 pagehide 事件。

一个伪 jQuery 示例：

$(window).bind("pageshow", function() {
  // update hidden input field
});