title: Get index of selected option with jQuery
body: <p>I'm a little bit confused about how to get an index of a selected option from a HTML <code>&lt;select&gt;</code> item.</p>
  
  <p>On <a href="http://www.theextremewebdesigns.com/blog/jquery-get-selected-index-jquery-get-selected-option-index-2-ways/" rel="noreferrer">this</a> page there are two methods described. However, both are always returning <code>-1</code>. Here is my jQuery code:</p>
  
  <pre><code>$(document).ready(function(){
      $("#dropDownMenuKategorie").change(function(){
          alert($("#dropDownMenuKategorie option:selected").index());
          alert($("select[name='dropDownMenuKategorie'] option:selected").index());
      });
  });
  </code></pre>
  
  <p>and in html</p>
  
  <pre><code>(...)
  &lt;select id="dropDownMenuKategorie"&gt;
      &lt;option value="gastronomie"&gt;Gastronomie&lt;/option&gt;
      &lt;option value="finanzen"&gt;Finanzen&lt;/option&gt;
      &lt;option value="lebensmittel"&gt;Lebensmittel&lt;/option&gt;
      &lt;option value="gewerbe"&gt;Gewerbe&lt;/option&gt;
      &lt;option value="shopping"&gt;Shopping&lt;/option&gt;
      &lt;option value="bildung"&gt;Bildung&lt;/option&gt;
  &lt;/select&gt;
  (...)
  </code></pre>
  
  <p>Why this behavior?  Is there any chance that the <code>select</code> is not "ready" at the moment of assigning its <code>change()</code> method? Additionally, changing <code>.index()</code> to <code>.val()</code> is returning the right value, so that's what confuses me even more.</p>