title: Get index of select option in an optgroup with jquery
body: <p>I have the following select:</p>
  
  <pre><code>&lt;select name="end" id="end"&gt; 
      &lt;optgroup label="Morning"&gt; 
          &lt;option value="12:00a"&gt;12:00 am&lt;/option&gt; 
          &lt;option value="12:30a"&gt;12:30 am&lt;/option&gt; 
          &lt;option value="1:00a"&gt;1:00 am&lt;/option&gt; 
          &lt;option value="1:30a"&gt;1:30 am&lt;/option&gt; 
      &lt;/optgroup&gt; 
      &lt;optgroup label="Evening"&gt; 
          &lt;option value="12:00p"&gt;12:00 pm&lt;/option&gt; 
          &lt;option value="12:30p"&gt;12:30 pm&lt;/option&gt; 
          &lt;option value="1:00p" selected="selected"&gt;1:00 pm&lt;/option&gt; 
          &lt;option value="1:30p"&gt;1:30 pm&lt;/option&gt; 
      &lt;/optgroup&gt; 
  &lt;/select&gt; 
  </code></pre>
  
  <p>I need to find the <strong>overall</strong> index of the selected option, but the optgroup is making that difficult.  In other words, the selected one should return 6, but it is returning 2.  I tried this:</p>
  
  <pre><code>var idx = $('#end :selected').prevAll().size();
  </code></pre>
  
  <p>But that returns the index within that optgroup, not the overall index.  I can't change the format or values of the select options.</p>