title: jQuery add css class depending on selectbox option
body: <p>I have 3 dropdown where I want to add a class to a specific div depending on the value of the dropdown.</p>
  
  <pre><code>&lt;select name="item1"&gt;
      &lt;option&gt;Blue&lt;/option&gt;
      &lt;option&gt;Green&lt;/option&gt;
      &lt;option&gt;Red&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="item2"&gt;
      &lt;option&gt;Blue&lt;/option&gt;
      &lt;option&gt;Green&lt;/option&gt;
      &lt;option&gt;Red&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="item3"&gt;
      &lt;option&gt;Blue&lt;/option&gt;
      &lt;option&gt;Green&lt;/option&gt;
      &lt;option&gt;Red&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="product"&gt;
      &lt;div class="item1"&gt;&lt;/div&gt;
      &lt;div class="item2"&gt;&lt;/div&gt;
      &lt;div class="item3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to add a css class depending on the value of a dropdown.
  For example, if the option <strong>blue</strong> from the dropdown <strong>item1</strong> is selected, I would like to add a class <strong>.blue</strong> to the div <strong>item1</strong>.</p>
  
  <p>I used to have checkboxes instead of the dropdown and I had this code:</p>
  
  <pre><code>$(document).ready(function($){
      $('input#red').change(function(){
          if($(this).is(":checked")) {
              $('div.item1').addClass("red");
          } else {
              $('div.item1').removeClass("red");
          }
      });
      $('input#blue').change(function(){
          if($(this).is(":checked")) {
              $('div.item1').addClass("blue");
          } else {
              $('div.item1').removeClass("blue");
          }
      });
  });
  </code></pre>
  
  <p>I created this: <a href="http://jsfiddle.net/uJcB7/14/" rel="nofollow">http://jsfiddle.net/uJcB7/14/</a>
  How does should be done correctly?</p>
  
  <p>------------EDIT-----------</p>
  
  <p>I am using gravity forms to generate the select box, and they are adding "|0" after the name of the option (I don't know why!).</p>
  
  <p>For example "green|0" instead of "green". The "|0" is hidden in the field but the class generated is "green|0".</p>
  
  <p>Any thought on how to remove that "|0" on the css class?</p>
  
  <p>Also they generate a name for the selectbox, is it possible to use a class instead of using the name element?</p>
  
  <p>Have a look on the updated code:</p>
  
  <p><a href="http://jsfiddle.net/uJcB7/24/" rel="nofollow">http://jsfiddle.net/uJcB7/24/</a></p>