Question

我正在尝试将选项标记值保存到本地存储。将其值保存到本地存储后，我希望能够将选项标记设置为用户选择的选项。我尝试了以下，但我只能保存价值。我无法将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');
}

Answer 1

这是因为您的选择选项的值和文本不同。尝试：

 <select name="fruit" id="fruit">
    <option value="Apple">Apple</option>
    <option value="Guava">Guava</option>
    <option value="Mango">Mango</option>
    <option value="Grapes">Grapes</option>
</select>

    document.getElementById("fruit").onchange = function() {
     localStorage['fruit'] = document.getElementById("fruit").value;
    }
    window.onload= function(){
        if(localStorage['fruit'])
            document.getElementById("fruit").value = localStorage['fruit'];
    }

Answer 2

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

如果您有从零开始的增量数字选项值，这是一个有效的解决方案：

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;
}

Answer 3

我认为您将选择的值存储在本地存储中，但之后尝试使用文本选项进行比较。也许我误解了你的应用程序是如何工作的。

无论如何，这个片段应该正确选择你的价值（对于番石榴果实）：

$("#fruit option[value='2']").attr("selected","selected");

如果必须按选项（番石榴）的文本设置选项标记：

$("#fruit option").each(function(){
  if ($(this).text() == "Guava")
    $(this).attr("selected","selected");
});

刷新本地存储后恢复下拉列表选择

3 个答案: