刷新本地存儲後恢復下拉選擇

我試圖將選項標記值保存到本地存儲。將其值保存到本地存儲後，我希望能夠將選項標記設置爲用戶選擇的選項。我試過了，但我只能保存價值。我無法將選擇標記更改爲用戶選定值。刷新本地存儲後恢復下拉選擇

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

來源

2012-12-14 Mr. 1.0

因爲你的選項值是整數，在這種情況下，我會檢查反對的選項，而不是選擇元素的文本內容的值。

這裏的，如果你有增量數值選項值，即工作從零開始的解決方案：

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

來源

2012-12-14 06:43:05

演示的偉大工程，但是當我複製粘貼到項目中，我得到「遺漏的類型錯誤：‘選擇’的未定義無法設置屬性」 –

你應該增加一些檢查的localStorage的值。例如，如果localStorage的值爲4，則會出現此類錯誤，因爲此代碼段中的索引4沒有選項。 –

在我看來，你喜歡你存儲的值的選擇在本地存儲，但然後嘗試使用選項文本進行比較。也許我誤解了你的應用程序的工作方式。

不管怎麼說，這個片段應該得到你的價值選擇正確（爲番石榴果）：

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

如果你必須在選項的文本（番石榴）設置的選項標籤：

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

來源

2012-12-14 06:43:50

這是因爲您的值和文本對於您的選擇選項不同。嘗試：

<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-14 06:46:36

刷新本地存儲後恢復下拉選擇

回答

相關問題