jquery - Get values from select options - use values to toggleClass() -


i have select box number of options. each option represents class name can selected , added div. div may have other classes not touched.

my issue toggle between these classes - not keep adding new ones. how can create script loops through class names of select box , toggles between them?

here's have - adds classes - doesn't toggle.

html:

<form id="form">   <div>     <label for="height">height:</label>     <select id="height">       <option>- select class -</option>       <option value="height133">133</option>       <option value="height55">55</option>       <option value="otherclass">127</option>     </select>   </div>   <button type="button" id="go">submit</button> </form> <div class="gridbox otherclass1 otherclass2">   <div></div> </div>  

jquery:

$("#go").click(function() {    var height = $("#height").find(":selected").val();    $(".gridbox").toggleclass(height); }); 

fiddle here.

thanks lot in advance.

you need remove other classes added earlier.

$("#go").click(function() {     var heightelem = $("#height");     var height = heightelem.find("option[value]:selected").val();     var allclassess = heightelem.find("option[value]") //traverse option elements         .map(function() {             return this.value ? this.value : null;         }).get() // array of class         .join(' ') //create string;     $(".gridbox").removeclass(allclassess).addclass(height); }); 

demo


Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -