javascript 刷新本地存储后恢复下拉选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13873822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
restore dropdown selection after refresh local storage
提问by Mr. 1.0
I am trying to save an options tag value to local storage. After saving its value to local storage I would like to be able to set the options tag to the option the user selected. I have tried the follow, but I am only able to save the value. I have trouble changing the select tag to the users selected value.
我正在尝试将选项标记值保存到本地存储。将其值保存到本地存储后，我希望能够将选项标签设置为用户选择的选项。我尝试了以下操作，但我只能保存该值。我无法将选择标记更改为用户选择的值。
<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');
}
采纳答案by Dani P.
Because your option values are integers, in this case, I would check against the valueof the option, not the textual contents of the option element.
因为您的选项值是整数，在这种情况下，我将检查选项的值，而不是选项元素的文本内容。
Here's a solution that works if you have incremental numerical option values, starting from zero:
如果您有增量数值选项值（从零开始），这是一个有效的解决方案：
HTML:
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>
And your JS would be:
你的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;
}?
回答by Akhil Sekharan
Its because your values and text are different for your select options. Try:
这是因为您选择的选项的值和文本不同。尝试：
<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'];
}
回答by Tim A
Looks to me like you are storing the valueof the selection in local storage, but then trying to use the option textto compare against. Maybe I'm misunderstanding how your application is working.
在我看来，您将选择的值存储在本地存储中，然后尝试使用选项文本进行比较。也许我误解了您的应用程序的工作方式。
Anyway, this snippet should get your value selected properly (for the Guava fruit):
无论如何，这个片段应该正确选择你的值（对于番石榴果实）：
$("#fruit option[value='2']").attr("selected","selected");
If you must set the options tag by the text of the option (Guava):
如果您必须通过选项（番石榴）的文本设置选项标签：
$("#fruit option").each(function(){
if ($(this).text() == "Guava")
$(this).attr("selected","selected");
});
