如何制作下拉菜单以选择适当的选定项目？

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>

如果我选择选项Three +，在某些页面刷新后，所选选项变为Three，因为Three和Three +具有相同的值。如何避免这种情况并使所选项目在页面刷新后为3 +？ 在此先感谢。

Answer 1

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

要停止此行为，您需要为Three+选项提供唯一的value，例如：

<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的模式是相同的，尽管代码需要修改。