title: jQuery manipulating select box while ignoring optgroups
body: <p>I've been stuck on this for quite some time now, not being able to solve it myself. Say I have this select:</p>
  
  <pre><code>&lt;select&gt;
      &lt;optgroup label="NFC EAST"&gt;
        &lt;option&gt;Dallas Cowboys&lt;/option&gt;
        &lt;option&gt;New York Giants&lt;/option&gt;
        &lt;option&gt;Philadelphia Eagles&lt;/option&gt;
        &lt;option&gt;Washington Redskins&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="NFC NORTH"&gt;
        &lt;option&gt;Chicago Bears&lt;/option&gt;
        &lt;option&gt;Detroit Lions&lt;/option&gt;
        &lt;option&gt;Green Bay Packers&lt;/option&gt;
        &lt;option&gt;Minnesota Vikings&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>and I have two buttons - next and prev. If someone clicks next then the next option is selected and vice versa. The problem I'm having is - how do I <strong>completely ignore</strong> the optgroups in this scenario? (i.e. if <code>Chicago Bears</code> is selected, pressing previous should select <code>Washington Redskins</code>). </p>
  
  <p><a href="http://jsfiddle.net/yuvii/U9hFV/1/" rel="nofollow">here's a jsfiddle</a> that illustrates the issue. I've tried many solutions but all of them got messy pretty fast. Any ideas? </p>
  
  <p>Thanks in advance! </p>