Add 'selected' attribute using the option value

Question

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

jQuerybeast · Accepted Answer · 2011-09-19 16:34:40Z

31

This works:

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

answered Sep 19, 2011 at 16:34

jQuerybeast

14.6k39 gold badges120 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Smile Over a year ago

Friend, you save me (y).

Jack · Accepted Answer · 2011-09-19 16:32:30Z

1

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/

edited Sep 19, 2011 at 16:32

answered Sep 19, 2011 at 16:19

Jack

8,9413 gold badges23 silver badges27 bronze badges

2 Comments

jQuerybeast Over a year ago

It doesn't work If im trying to retrieve from the localstorage. Here is an example: jsfiddle.net/uY7ck

jQuerybeast Over a year ago

Thank you sir. I found my way to work better because of less code. Your way, I will need to type the If statement as many options I have. My way, is just 3 line of code. Thanks alot though

marc_s · Accepted Answer · 2017-02-12 20:07:54Z

1

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

edited Feb 12, 2017 at 20:07

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 19, 2011 at 16:15

user400654

95.1k16 gold badges168 silver badges188 bronze badges

1 Comment

user400654 Over a year ago

it works for me, jsfiddle.net/uY7ck/2 check your id's. you were selecing a select with an id of emailclient when the only select on the fiddle had an id of selectbox

Korvin Szanto · Accepted Answer · 2011-09-19 16:30:09Z

0

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

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

edited Sep 19, 2011 at 16:30

answered Sep 19, 2011 at 16:05

Korvin Szanto

4,5194 gold badges22 silver badges49 bronze badges

4 Comments

jQuerybeast Over a year ago

It's not logical to work and it doesn't. You're setting the selectbox option to selected of what?

user400654 Over a year ago

@Korvin you don't even need to navigate to the selected option. just call .val() on the select for the same result.

Korvin Szanto Over a year ago

@Tentonaxe his original question was asking for the value of the selected option, not the contents of the selected option, otherwise you're completely correct.

Korvin Szanto Over a year ago

@jQuerybeast your jsfiddle will not produce your desired outcome because you are referring to the wrong select box 0.0

bstakes · Accepted Answer · 2011-09-19 16:39:49Z

0

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.

edited Sep 19, 2011 at 16:39

answered Sep 19, 2011 at 16:33

bstakes

1,89814 silver badges12 bronze badges

1 Comment

jQuerybeast Over a year ago

On your edit: True. I found that to be a problem but anyways, all my options have no spaces. I found my way to work much better since I don't need to type the If statement as many times as my options, rather than only the 3 line code. Thanks alot though

Collectives™ on Stack Overflow

Add 'selected' attribute using the option value

5 Answers 5

1 Comment

2 Comments

1 Comment

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related