Question

I have a select (dropdown) in a form. When I change the value in the drop down I need to find out whether I selected the first element in the drop down or the 2nd element in the drop down?

How can we acheive this using jQuery or JavaScript.

Thanks for your time. I’ve been searching for a while and couldn’t find anything on this.

Answer 1

You can use index():

$("select").change(function() {
    var selectedIndex = $("option:selected", this).index();
});

Example fiddle

Or you can use the plain javascript selectedIndex property:

$("select").change(function() {
    var selectedIndex = this.selectedIndex;
});

Personally I’d use the latter as it’s better practice (and slightly faster) to use native javaScript constructs where possible, although both will give you the same result.