18
<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

Vov4ik
  • 323
  • 1
  • 6
  • 14

8 Answers8

17

Only Bob's second answer is correct:

$("#sel")[0].selectedIndex

Works: http://jsfiddle.net/b9chris/wxeVN/1/

Using .attr() works only if the user (or browser's DOM restore) has not changed the option selected since the page loaded: http://jsfiddle.net/b9chris/wxeVN/

You could implement this as a jQuery extension, and get a little more info in the process:

(function($) {
    $.fn.selectedOption = function() {
        var sel = this[0];
        return sel.options[sel.selectedIndex];
    };
})(jQuery)

$('button').click(function() {
    $('#output').text('selected index: ' + $('select').selectedOption().index);
});

http://jsfiddle.net/b9chris/wxeVN/102/

What's returned by .selectedOption() is the actual option tag, so you can access .index, .value, and .text - a bit more convenient than just the index in typical usage.

Chris Moschini
  • 36,764
  • 19
  • 160
  • 190
9

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/

Justin Morgan - On strike
  • 30,035
  • 12
  • 80
  • 104
5
$("#sel").attr("selectedIndex")

or

$("#sel")[0] //to get the DOM element
$("#sel")[0].selectedIndex
Bob
  • 97,670
  • 29
  • 122
  • 130
3

This will do it:

   $("#sel").attr("selectedIndex")
  • 2
    This confuses the difference between attr and prop. Notice that once you change the selected item in the dropdown in this example, selectedIndex does not change, and is incorrect: http://jsfiddle.net/b9chris/wxeVN/ – Chris Moschini Jul 17 '12 at 00:32
  • 3
    This is wrong. `attr("selectedIndex")` does nothing, you need `prop("selectedIndex")`. Demo: http://jsfiddle.net/Nj85e/ – Justin Morgan - On strike Jan 29 '14 at 21:09
  • 7
    Note my answer was written in 2009 - and at the time it **was** correct. jQuery has undergone changes since then.. –  Jan 30 '14 at 10:15
  • According to http://api.jquery.com/prop/ in this particular case `.prop()` is correct not `.attr()` – JOBG Nov 17 '14 at 14:25
  • attr Wont work you need to change to prop, or use [0].selectedIndex to access dom element not jquery object – Neta Meta Oct 27 '15 at 03:43
2

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

Jacob Relkin
  • 161,348
  • 33
  • 346
  • 320
2

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;
antti_s
  • 161
  • 2
  • 1
    This seems like a round about way of getting the selected index, what is the cost of prevAll? – Bob Nov 30 '09 at 00:42
  • 1
    You are right, checking for the selectedIndex is better in this case. prevAll() however should be faster then fiddling around with the native .index() method here which was the OP's initial solution (unless using jQuery 1.3.3) – antti_s Nov 30 '09 at 09:11
1

Use the standard index function of jquery like in this code example

$("#sel option:selected").index()

user167517
  • 1,131
  • 1
  • 7
  • 3
0

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
user1566694
  • 1,363
  • 2
  • 13
  • 21