javascript - 刷新本地存储后恢复下拉菜单选择

我正在尝试将选项标签值保存到本地存储。将其值保存到本地存储后，我希望能够将options标记设置为用户选择的选项。我尝试了以下方法，但是我只能保存该值。我无法将select标签更改为用户选择的值。

<select name="fruit" id="fruit">
    <option value="1">Apple</option>
    <option value="2">Guava</option>
    <option value="3">Mango</option>
    <option value="4">Grapes</option>
</select>

document.getElementById("fruit").onchange = function() {
 localStorage.setItem('fruit', document.getElementById("fruit").value);
}

if (localStorage.getItem('fruit') === "Guava") {
 document.getElementById("fruit").setAttribute('Selected', 'Guava');
}

最佳答案

因为您的选项值为整数，所以在这种情况下，我将检查选项的值，而不是选项元素的文本内容。

如果您具有从零开始的递增数值选项值，那么以下解决方案可以使用：

DEMO

HTML：

<select name="fruit" id="fruit">
    <option value="0">Apple</option>
    <option value="1">Guava</option>
    <option value="2">Mango</option>
    <option value="3">Grapes</option>
</select>

而您的JS将是：

document.getElementById("fruit").onchange = function() {
    localStorage.setItem('fruit', document.getElementById("fruit").value);
}

if (localStorage.getItem('fruit')) {
    document.getElementById("fruit").options[localStorage.getItem('fruit')].selected = true;
}​

关于javascript - 刷新本地存储后恢复下拉菜单选择，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13873822/