title: Changing a class from Select
body: <p>I'm trying to append a class in a div via the values in the drop down. I've managed to do that, however, the previous class is still in the div and not getting replaced</p>
  
  <p>so instead of getting</p>
  
  <pre><code>&lt;div id="layoutblock" class="row one-column"&gt;
  </code></pre>
  
  <p>I'm getting</p>
  
  <pre><code>&lt;div id="layoutblock" class="row one-column two-columns three-columns"&gt;
  </code></pre>
  
  <p>the classes are compounding</p>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;select id="layout"&gt;
  &lt;option value="one-column"&gt;one-column&lt;/option&gt;
  &lt;option value="two-columns"&gt;two-column&lt;/option&gt;
  &lt;option value="three-columns"&gt;three-column&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="layoutblock" class="row"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>The JQuery</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $("#layout").change(function () {
    var str = "";
  $("#layout option:selected").each(function () {
    str += $(this).val();   
    });
  $('#layoutblock').removeClass($(this) str);
  $('#layoutblock').toggleClass(str);
  })
  .change();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas, Thanks</p>
  
  <p>Regards
  Said</p>