title: Get values from select options - use values to toggleClass()
body: <p>I have a select box with a number of options. Each option represents a class name that can be selected and added to a div. The div may already have other classes which are not to be touched.</p>
  <p>My issue is that I would like to toggle between these classes only - not just keep adding new ones. How can I create a script that loops through all the class names of the select box and toggles between them?</p>
  <p>Here's what I have - i just adds classes - it doesn't toggle.</p>
  <p>html:</p>
  <pre><code>&lt;form id=&quot;form&quot;&gt;
    &lt;div&gt;
      &lt;label for=&quot;height&quot;&gt;Height:&lt;/label&gt;
      &lt;select id=&quot;height&quot;&gt;
        &lt;option&gt;- Select class -&lt;/option&gt;
        &lt;option value=&quot;height133&quot;&gt;133&lt;/option&gt;
        &lt;option value=&quot;height55&quot;&gt;55&lt;/option&gt;
        &lt;option value=&quot;otherclass&quot;&gt;127&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;button type=&quot;button&quot; id=&quot;go&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;div class=&quot;gridbox otherclass1 otherclass2&quot;&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  <p>jQuery:</p>
  <pre><code>$(&quot;#go&quot;).click(function() {
     var height = $(&quot;#height&quot;).find(&quot;:selected&quot;).val();
     $(&quot;.gridbox&quot;).toggleClass(height);
  });
  </code></pre>
  <p><a href="https://jsfiddle.net/ds3nn5tn/3/" rel="nofollow noreferrer">Fiddle here</a>.</p>
  <p>Thanks a lot in advance.</p>