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); });
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); });
Comments
Post a Comment