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页面显示和页面隐藏事件。

伪jQuery示例：

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

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

2 个答案: