Question

好的，所以这是一个奇怪的，以前没见过。

我有一个简单的html下拉列表，没有附加js（还）。

这是使用带有过渡doctype的html4（xhtml1？）。顺便说一句..我试着逃避斜线而没有相同的结果。（/）

<select id="myDropdown" name="myDropdown">
<option value="option1" selected="selected">Contact &#x2F; Email Customer Care</option>
<option value="option2">Group &#x2F; Private Tour</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
<option value="option5">Option5</option>
</select>

当我进行硬重载（ctrl + f5，或ctrl + shift + R）时，它会在框中加载正确的选项（选项1）。

但是，如果我只按普通F5进行软刷新，只有选中选项1时，它才会将option2加载为所选选项。如果选择了选项3,4或5，则不会更改。但是，如果选择了选项1，则每次刷新页面时都会更改为选项2。

为什么会发生这种情况？这非常令人沮丧，我在网上看不到任何关于它的信息。

由于

Answer 1

这似乎是一个奇怪的Firefox行为，我可以在Firefox的版本中看到它，包括27（当前）。我建议记录错误/发送反馈。

解决这个问题虽然相当简单...如果你想让下拉总是在页面上重置加载，只需要一小段脚本在组合之后强制它（并且不会对其产生负面影响）其他浏览器

<script>
// console.log(document.getElementById("myDropdown").value)
document.getElementById("myDropdown").selectedIndex = 0
</script>

如果所选值可能会发生变化，那么您希望selectedIndex匹配您调整selected所指示的任何值。

哦，只是关于selected="selected"的一个注释...该属性通常只是selected但是

<option value="option1" selected>Contact &#x2F; Email Customer Care</option>

在这里没有什么区别

Answer 2

与answer by Offbeatmammal中的想法相同，但是自动化程度更高，假设您可以在页面中的所有选择器上使用相同的属性（其他限制使用类或id）：

<script>
function fix_selectors_positions()
{
    selectors = document.querySelectorAll("select");
    selectors.forEach(item =>
        item.selectedIndex = item.getAttribute("default_pos")
    );
}
window.onload = fix_selectors_positions;
</script>

然后在选择器上使用属性default_pos：

<select default_pos="0">[...]

页面刷新时HTML下拉值更改

2 个答案: