How to select a dropdown option using JavaScript

Question

I am programming something that selects size 10.5 on this website: http://www.ruvilla.com/new/men/footwear/nike-air-foamposite-one-concord.html

Currently I am testing my code using the Google Chrome console. Here is my code:

document.getElementsByClassName('villa-lb-span').getAttribute = "10.5".select;

The outcome in the Google Chrome console is "undefined". My goal with this is to select size 10.5 ... Can someone please provide me some feedback on my code?

The sizes are stored in a dropdown. I'm just not sure why my code isn't working. I have been working on this for about 2 hours and I have checked all around this forum. Nothing seems to be working for me. Any help would be highly appreciated. Thanks!

`"10.5".select` i don't understand it. would plz mention what is it exactly? — Jai, Jul 12 '14 at 00:15
please provide corresponding html, not a link to a website....your code makes no sense at all — charlietfl, Jul 12 '14 at 00:16

score 1 · Answer 1 · answered Jul 12 '14 at 01:18

1

Very simply set the value property of the dropdown node to the value you want to change it to.

document.getElementById('attribute196').value = 184;//since that is the value of the 10.5 option

answered Jul 12 '14 at 01:18

Musa

96,336
17
118
137

Shahar · Answer 2 · 2014-07-12T00:37:26.797

0

Using pure javascript, you'd need to do some work. Iterate through the options and then choose the value:

var options = document.getElementById('attribute196').options; //Get all the options of the dropdown
for (var i = 0; i < options.length; i++){
    if (options[i].value == "184") { //The '10.5' option has a value of "184" 
        options[i].selected = true;
        break;
    }
}

edited Jul 12 '14 at 00:37

answered Jul 12 '14 at 00:23

Shahar

1,687
2
12
18

Thanks for the reply! Seems like what i need. Except i got this error "TypeError: Cannot read property 'length' of undefined" – user3642999 Jul 12 '14 at 00:26
@user3642999 It's because `villa-lb-span` is only the *label* and not the actual drop down object. One minute, let me fix it. – Shahar Jul 12 '14 at 00:33
@user3642999 I fixed the code. Try it out, for some reason my Chrome is not iterating through the array correct so I'm not certain it will work. – Shahar Jul 12 '14 at 00:50

score -1 · Answer 3 · answered Jul 12 '14 at 00:36

-1

document.querySelector('.villa-lb-span').options[document.querySelector('.villa-lb-span').selectedIndex].value;

answered Jul 12 '14 at 00:36

Jain

1,209
10
16

Some text to help explain the solution to others might be helpful – ScottJShea Jul 12 '14 at 01:34
document.querySelector get the selected value of dropdown then we then we have to select it get ite value. – Jain Jul 18 '14 at 01:37

How to select a dropdown option using JavaScript

3 Answers3