How to get the Index of select->option tag

Question

<select id="sel">
<option value="123" selected="selected">text1</option>
<option value="44">text2</option>
<option value="882">text3</option>
...
</select>

How to get the index of selected option with jQuery? May be .index(subject), but all possibilities tested, didn't work...

P.S. Indexes: value="123" => 0, value="44" => 1, ...

Thanx

Answer 1

This will do it:

   $("#sel").attr("selectedIndex")

Answer 2

You can actually do it without jQuery: var sel = document.getElementById( 'sel' ); var index = sel.selectedIndex;

Answer 3

The title doesn't quite match the question...

How to get the Index of select->option tag

option.index // javascript

$(option).prop('index') // jquery

---

index of selected select->option tag:

document.getElementById('sel').selectedIndex // javascript

Answer 4

You can get the index of the element in this case by checking how many sibling elements the selected element has before it:

$('#sel option:selected').prevAll().length;

Answer 5

$("#sel").attr("selectedIndex")

or

$("#sel")[0] //to get the DOM element
$("#sel")[0].selectedIndex

Answer 6

As I write this, two of the top answers (including the accepted answer) are incorrect despite being pointed out nearly five years ago. attr("selectedIndex") does nothing, because selectedIndex is a property on the actual DOM element, not an HTML attribute. You need to use prop:

$(this).prop('selectedIndex')

Interactive demo comparing this to the incorrect version: http://jsfiddle.net/uvwkD/