Question

在英语页面中说，“语言选择器选择框”文本为“ EN”，然后选择西班牙语选项“ ES”进入相应的西班牙语页面。

然后，但是，通过单击浏览器的后退按钮，它将带我回到英语页面，并且“语言选择器选择框”文本仍然保留为“ ES”。尽管如此，英文页面的“ EN”选项仍具有（selected =“ selected”）属性。

<select id="lang-picker" onchange="location = this.value;">
   <option id="english" value="/index.html" selected="selected">EN</option>
   <option id="spanish" value="/es/index.html">ES</option>
</select>

我正在使用materializecss.com CSS框架。

Answer 1

之所以发生这种情况，是因为浏览器还原了页面的状态，而不仅仅是从头开始重新加载页面。因此，仍会选择新选择的西班牙语选项。

为避免发生这种情况，请在change事件处理程序中重新选择English选项。最小更改方式是将您的onchange更改为：

onchange="var dest = this.value; this.value = this.options[0].value; location = dest;"

...但是我强烈建议您关注现代事件处理，而不要使用onxyz-attribute-events。例如，您可以完全删除该onchange并使用addEventListener在正文末尾的script元素中（恰好在结束</body>标记之前）添加此JavaScript代码。

document.getElementById("lang-picker").addEventListener("change", function() {
    var dest = this.value;
    this.value = this.options[0].value;
    location = dest;
});

如何使用HTML Select（选项值）具有特定语言页面的HREF来创建语言选择器？

1 个答案: