Get index of selected option with jQuery

Question

I'm a little bit confused about how to get an index of a selected option from a HTML <select> item.

On this page there are two methods described. However, both are always returning -1. Here is my jQuery code:

$(document).ready(function(){
    $("#dropDownMenuKategorie").change(function(){
        alert($("#dropDownMenuKategorie option:selected").index());
        alert($("select[name='dropDownMenuKategorie'] option:selected").index());
    });
});

and in html

(...)
<select id="dropDownMenuKategorie">
    <option value="gastronomie">Gastronomie</option>
    <option value="finanzen">Finanzen</option>
    <option value="lebensmittel">Lebensmittel</option>
    <option value="gewerbe">Gewerbe</option>
    <option value="shopping">Shopping</option>
    <option value="bildung">Bildung</option>
</select>
(...)

Why this behavior? Is there any chance that the select is not "ready" at the moment of assigning its change() method? Additionally, changing .index() to .val() is returning the right value, so that's what confuses me even more.

Such an old question but the real problem is the `[name=]` used when select has `id` on it. The `[0].selectedIndex` and `option:selected` -answers below are both ok. — diynevala, May 18 '15 at 08:31

Guffa · Accepted Answer · 2015-12-13T12:44:23.123

391

The first methods seem to work in the browsers that I tested, but the option tags doesn't really correspond to actual elements in all browsers, so the result may vary.

Just use the selectedIndex property of the DOM element:

alert($("#dropDownMenuKategorie")[0].selectedIndex);

Update:

Since version 1.6 jQuery has the prop method that can be used to read properties:

alert($("#dropDownMenuKategorie").prop('selectedIndex'));

edited Dec 13 '15 at 12:44

answered Nov 26 '12 at 00:05

Guffa

687,336
108
737
1,005

35

@Joan.bdm jquery does not have `selectedIndex` property. Adding `[0]` converts the jquery object to a javascript object which has the `selectedIndex` property. This example won't work without `[0]` – Aram May 21 '14 at 23:28
@JasonL.: `selectedIndex` is a property, and there is no corresponding attribute. The `attr` method might work to read the property in versions earlier than 1.6, but not from that version. – Guffa Dec 29 '15 at 20:56
@Guffa Any idea as to why the `selectedIndex` doesn't start from 0 with the first option? – adamj Mar 25 '16 at 23:27
1

@adamj: Then you are doing something wrong. The `selectedIndex` property is zero based. I checked the documentation and even tried it myself to be truly 100% sure about this. – Guffa Mar 26 '16 at 23:24
@Guffa Thank you very much on your reply Guffa! Your message actually made something click. I use Select2 and I forgot to account for the placeholder when marrying it up to an array. Silly small mistake. Thanks again :) – adamj Mar 27 '16 at 01:00
thank you for providing the `prop` method -- it got me past a snag where other "solutions" elsewhere did not work – aequalsb Feb 11 '17 at 18:36
The answer by user167517 is the way to go since you are using jquery – Scott Aug 20 '19 at 14:10

score 102 · Answer 2 · answered Jun 24 '14 at 17:48

102

Good way to solve this in Jquery manner

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

answered Jun 24 '14 at 17:48

user167517

1,131
1
7
3

2

I like that this answer doesn't require the `[0]` of OP's preferred answer and as a python dev, I can really appreciate the readability of this answer. – NuclearPeon Jul 14 '14 at 11:05
4

The OP already tried that. The code is identical to the first method in the question. – Guffa Dec 04 '14 at 11:47
I was looking for this and found it: document.querySelector('.jsPaymentStatusOptions option[selected]').index – Jatinder Nov 20 '22 at 19:24

score 21 · Answer 3 · answered Jul 03 '15 at 04:44

You can use the .prop(propertyName) function to get a property from the first element in the jQuery object.

var savedIndex = $(selectElement).prop('selectedIndex');

This keeps your code within the jQuery realm and also avoids the other option of using a selector to find the selected option. You can then restore it using the overload:

$(selectElement).prop('selectedIndex', savedIndex);

score 19 · Answer 4 · answered Aug 20 '14 at 04:59

I have a slightly different solution based on the answer by user167517. In my function I'm using a variable for the id of the select box I'm targeting.

var vOptionSelect = "#productcodeSelect1";

The index is returned with:

$(vOptionSelect).find(":selected").index();

score 7 · Answer 5 · answered Nov 26 '12 at 06:59

7

try this

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);

answered Nov 26 '12 at 06:59

rajesh kakawat

10,826
1
21
40

1

What's with all the alerts? – Beanwah Aug 27 '15 at 21:19
3

@Beanwah - It's the best way to test anything! ;) – JoePC Feb 06 '18 at 19:07
3

@JoePC no its not. console.log() will do better – Aug 14 '18 at 12:43
1

@reiner.luke - ;) = facetiousness – JoePC Aug 14 '18 at 18:57

score 7 · Answer 6 · answered Jan 23 '15 at 10:49

selectedIndex is a JavaScript Select Property. For jQuery you can use this code:

jQuery(document).ready(function($) {
  $("#dropDownMenuKategorie").change(function() {
    // I personally prefer using console.log(), but if you want you can still go with the alert().
    console.log($(this).children('option:selected').index());
  });
});

score 4 · Answer 7 · answered Feb 15 '16 at 06:52

You can get the index of the select box by using : .prop() method of JQuery

Check This :

<!doctype html>
<html>
<head>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});

function check(){
    alert($("#NumberSelector").prop('selectedIndex'));
    alert(document.getElementById("NumberSelector").value);
}
</script>
</head>

<body bgcolor="yellow">
<div>
<select id="NumberSelector" onchange="check()">
    <option value="Its Zero">Zero</option>
    <option value="Its One">One</option>
    <option value="Its Two">Two</option>
    <option value="Its Three">Three</option>
    <option value="Its Four">Four</option>
    <option value="Its Five">Five</option>
    <option value="Its Six">Six</option>
    <option value="Its Seven">Seven</option>
</select>
</div>
</body>
</html>

score 1 · Answer 8 · answered Apr 10 '22 at 18:40

Actually just reiterating what has already been stated a little differently:

$("#dropDownMenuKategorie").change(function() {
     var Selection = $("#dropDownMenuKategorie option:selected");
     alert(Selection.index());
     alert(Selection.val());
});

infomasud · Answer 9 · 2022-03-17T20:16:24.257

Assume You have jquery loaded. So

HTML :

<select id="dropDownMenuKategorie">
    <option value="gastronomie">Gastronomie</option>
    <option value="finanzen">Finanzen</option>
    <option value="lebensmittel">Lebensmittel</option>
    <option value="gewerbe">Gewerbe</option>
   <option value="shopping">Shopping</option>
   <option value="bildung">Bildung</option>
</select>

JS:

$(document).ready(function(){
    $("#dropDownMenuKategorie").change(function(){
       var selIndex = $(this).prop('selectedIndex');
       var selVal = $("#dropDownMenuKategorie option:selected").val();
       var selText = $("#dropDownMenuKategorie option:selected").text();
       console.log(selIndex + selVal + selText );
    });
});

Get index of selected option with jQuery

9 Answers9

Update:

Linked

Related