CODEWITHSUNDEEP
jquerylocal-storagedrop-down-menu
jQuerybeast
jQuerybeast

Reputation: 14510

Add 'selected' attribute using the option value

I have a select box with 10 options. Each time you select an option it sets in the localstorage the value you selected with id "select1".

For example: If you select the first option you get in the localstorage: Key: Emailclient - Value: Option1.

Now, Iom trying to make the value of the localstorage, the selected attribute in the select form.

This is what I tried but doesn't seem to work:

if (localStorage.getItem("Select1") == "Option1"){ 
    $('#selectbox').val("Option1").attr("selected");
}

What I'm I doing wrong?

EDIT:

This is my code:

<select id="selectbox" >
                        <option>Default</option>
                        <option>Option 1</option>
                        <option>Option 3</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                        <option>Option 5</option>
                        <option>Option 6</option>
        </select>

Thanks

Upvotes: 11

Views: 68233

Answers (5)

Kevin B
Kevin B

Reputation: 95066

Try this:

if (localStorage.getItem("Select1") == "Option1"){ 
    $('#selectbox option:contains(Option1)').prop('selected',true); // jquery 1.6+
}

if you are using a version of jQuery older than 1.6, replace .prop with .attr

Edit: more dynamic version

if (localStorage.getItem("Select1")) {
  $('#selectbox option:contains(' + localStorage.getItem("Select1") + ')').prop('selected',true);
}

Upvotes: 1

bstakes
bstakes

Reputation: 1898

This is all you should need:

$("#selectbox").val(localStorage.getItem("selectbox"));

I've updated a previous fiddle for an example: http://jsfiddle.net/uY7ck/1/

EDIT: In the code you posted originally, assuming you are setting localStorage with the same select box, you would be comparing "Option1" (no space) with "Option 1" (space). That comparison will never work, so the option would never be selected.

Upvotes: 0

jQuerybeast
jQuerybeast

Reputation: 14510

This works:

var optionValue  = localStorage.getItem("Select1")
$("#selectbox").val(optionValue)
.find("option[value=" + optionValue +"]").attr('selected', true);

Upvotes: 31

Jack
Jack

Reputation: 8941

I think you might be looking for something like this. http://jsfiddle.net/tnPU8/3/

It loops through the options of the select box and compares their values with the values of b. If they are equal the index of the select box is changed so that the option that contains the value of b is displayed.

var b; //set equal to what you want to compare
$('#selectbox').find('option').each(function(i,e){
    console.log($(e).val());
    if($(e).val() == b){
        $('#selectbox').prop('selectedIndex',i);
    }
});

Edit: Using localStorage http://jsfiddle.net/tnPU8/7/

Upvotes: 1

Korvin Szanto
Korvin Szanto

Reputation: 4511

On further review, it looks as though you wanted something more fully feature link

search = "Option 5";
$('#selectbox option:contains('+search+')').prop('selected',true);

Upvotes: 0

Related Questions