title: Change select box css on click option
body: <p>I am attempting to add a class to the <code>select</code> element depending on what <code>option</code> is selected.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select class="wordpress"&gt;
    &lt;option value="1" class="wordpress"&gt;Hello&lt;/option&gt;
    &lt;option value="2" class="joomla"&gt;2222&lt;/option&gt;
    &lt;option value="3" class="wordpress"&gt;33333&lt;/option&gt;
    &lt;option value="4" class="joomla"&gt;44444&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>select{
    margin-top:50px;
    padding:10px;
    font-size:30px;
    border:1px solid #ccc;
  }
  .wordpress{
    background:url('http://muabanraovat.com/images/imgWordpress32.png') no-repeat center left transparent;
    padding-left:35px;
  }
  .joomla{
    background:url('https://a6a8g7g5.ssl.hwcdn.net/icons/22/216447/icon.png') no-repeat center left transparent;
    padding-left:35px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function($){
      $('select').change(function(){
          $(this).removeClass().addClass('wordpress');
      });
  });
  </code></pre>
  
  <p>CSS Deck: <a href="http://cssdeck.com/labs/vmbenx2c" rel="nofollow">http://cssdeck.com/labs/vmbenx2c</a></p>