2

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

<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');
}
4

3 回答 3

3

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

 <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'];
    }
于 2012-12-14T06:46:36.143 回答
1

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

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

演示

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;
}​
于 2012-12-14T06:43:05.830 回答
0

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

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

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

如果您必须通过选项的文本（Guava）设置选项标签：

$("#fruit option").each(function(){
  if ($(this).text() == "Guava")
    $(this).attr("selected","selected");
});
于 2012-12-14T06:43:50.300 回答