Find index of selected option

Given this HTML…

<select><option>Index zero</option><option>Index one</option><option>Index two</option></select><p>Selected option has index: <span id="output">0</span></p>

here is a jQuery code snippet to find the index of the option that has been selected.

$('select').change(function() {
  $('#output').text(
    var $this = $(this);
    $this.children().index( $this.children(':selected') )
  );
}).trigger('change');

Use jQuery's index function to return the index of the item that matches the ':selected' selector within the children of the select element.

Example: