How to get the Index of an option based on a value

Question

So I currently have a select field that looks something like this:

<select id = "foo">
   <option value = "example">This example</option>
   <option value = "example2">This example Again</option>
   <option value = "bar">This is just a bar</option>
</select>

and if the submitted form returns back with an error, it sends me back all the values in a object, and I need to repopulate the form.

My question: how can I efficiently get the index of value bar, without having to use jQuery?

Is there a way to do it without having to loop through each of the options, checking the value against the one I have, then setting it as checked if it is the same as my value?

Any insight is greatly appreciated

http://stackoverflow.com/questions/11761881/javascript-dom-find-element-index-in-container — gurvinder372, Feb 02 '16 at 18:02

score 5 · Accepted Answer · answered Feb 02 '16 at 18:02

5

You can combine querySelector() with index:

var selected = document.querySelector( '#foo > option[value="bar"]' );
console.log(selected.index);

jsFiddle Demo

answered Feb 02 '16 at 18:02

BenM

52,573
26
113
168

2

ooops! undoing my sin – T McKeown Feb 02 '16 at 18:05
1

This is absolute GOLD! I looked everywhere for something like this! Thanks so much. I'll accept it when SO will let me lol. – Derek Pollard Feb 02 '16 at 18:09

How to get the Index of an option based on a value

1 Answers1