javascript - 如何制作下拉菜单以选择正确的选定项目？

Question

我有一个如下所示的下拉菜单。

<select name="slt">
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="3">Three +</option>
</select>

如果我选择选项“三+”，则在刷新一些页面后，所选选项将变为“三”，因为“三”和“三+”具有相同的值。如何避免这种情况并使页面刷新后所选项目为“三+”？ 提前致谢。

Answer 1

这是因为浏览器会自动保留该值。如果该值重复，它将选择在列表中找到的第一个值。

要阻止此行为，您需要为 Three+ 选项指定一个唯一的值，例如:

<option value="3+">Three +</option>

<小时/>

如果您根本无法更改 HTML，则需要将所选元素的索引存储在 localStorage 或 cookie 中，并在加载时再次设置:

// set onchange
$('select').change(function() {
    localStorage.setItem('sltIndex', $(this).prop("selectedIndex"));
});

// get onload
$(this).prop("selectedIndex", localStorage.getItem('sltIndex') || 0)

尽管代码需要修改，但使用 cookie 的模式是相同的。