title: Change select's class based on selected option's class
body: <p>I have a page that contains numerous &lt;select&gt; elements. What I'm trying to achieve is to ensure that if a &lt;select&gt;'s selected &lt;option&gt; has a class called <em>italic</em>, then the &lt;select&gt; then has the <em>italic</em> class added (i.e. <code>jQuery.addClass('italic')</code>).  If it doesn't, then the <em>italic</em> class is removed from the &lt;select&gt; to ensure other &lt;option&gt; elements are displayed correctly (i.e. <code>jQuery.removeClass('italic')</code>).</p>
  
  <p>What I'm noticing with most of my attempts is that either all the &lt;select&gt; have the <em>italic</em> class or that the <em>italic</em> class isn't being removed accordingly.</p>
  
  <p>Since I'm unsure my choice in selectors and callback logic are particularly sound or good practice in this instance (as I've been frustratingly trying to make it work) I've decided not to include the code I used in previous attempts.  Instead, refer to this small HTML &amp; CSS example:</p>
  
  <pre>
  .italic {
      font-style: italic;
  }
  
  &lt;select id="foo" name="foo" size="1">
    &lt;option value="NA" selected="selected"> - Select - &lt;/option>
    &lt;option value="1">Bar&lt;/option>
    &lt;option value="2">Fu&lt;/option>
    &lt;option value="3">Baz&lt;/option>
  &lt;/select>
  </pre>
  
  <p>Also, I am aware that not all browsers support CSS styling of &lt;select&gt; and &lt;option&gt;. The related J2EE web application will only ever be accessed via Firefox under a controlled environment.</p>