最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - restore dropdown selection after refresh local storage - Stack Overflow

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

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');
}
Share Improve this question asked Dec 14, 2012 at 6:32 DanielDaniel 4,34212 gold badges51 silver badges69 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

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

Because your option values are integers, in this case, I would check against the value of 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:

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>

And your JS would be:

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

Looks to me like you are storing the value of the selection in local storage, but then trying to use the option text to pare 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");
});
发布评论

评论列表(0)

  1. 暂无评论