How to set attribute of select option by targeting value instead of index

Question

When a user clicks on a particular div (in my case a palette of swatches) I need that click to set the "selected" attribute of an option in a select list to "selected". This is working when I can target the option by its index with something like this:

onClick="getElementById('the_select')
         .options[2].setAttribute('selected', 'selected');"

But this doesn't work when I try to target the option by its value like this:

 onClick="getElementById('the_select')
         .option[value='blue'].setAttribute('selected', 'selected');"

I need to target the value because in this case "blue" is not always going to be in the same place in the select list.

How can I accomplish this?

the_select.value="blue"; works just fine, don't make it overly-complicated. — dandavis, Aug 21 '14 at 20:29
@dandavis I wish it were that simple, but in order for me to get the shopping cart to recognize that a selection was made, it seems I need to set the "selected" attribute for that option. — Chimpy, Aug 21 '14 at 20:46

score 0 · Answer 1 · edited Aug 21 '14 at 20:15

0

I guess you could do something like this:

document.getElementById("my_select").selected=true;

edited Aug 21 '14 at 20:15

codeMagic

44,229
13
74
91

answered Aug 21 '14 at 20:09

Alejo Mosquera

1

I tried something like this, but for some reason our shopping cart system wants the "selected" attribute to be set, or it won't think that the user has actually selected anything. – Chimpy Aug 21 '14 at 20:12

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

I found a workable solution using straight javascript based on a post by Dave on this thread...

jQuery - setting the selected value of a select control via its text description

edited May 23 '17 at 12:27

Community

1
1

answered Aug 21 '14 at 21:55

Chimpy

11
1

How to set attribute of select option by targeting value instead of index

2 Answers2