how to return SELECT to default CSS after changing with JQUERY on SELECTED -
i want highlight user's choices on series of select, have accomplished jquery.
problem if select returned default position not change 'plain' select ( without highlight).
additionally change jquery changes format of select box, somehow.
please see fiddle @ http://jsfiddle.net/bernarda/bm3p4/
my internet connection limited these days, may slow respond queries.
thanks help!
the html below:
<form id="filtermodel"> <select id="fuelselect" class="specselect" name="fuel" > <option value="none"> fuel </option> <option value="gas">essence </option> <option value="diesel">diesel</option> </select> <select id="powerselect" class="specselect" name="power" > <option value="0"> cv </option> <option value="100"> >100 hp </option> <option value="150"> >150 hp </option> <option value="200"> >200 hp </option> </select> <select id="mileageselect" class="specselect" name="mileage" > <option value="100"> mileage</option> <option value="5"> <5l/100km </option> <option value="6"> <6l/100km </option> <option value="7"> <7l/100km </option> </select> <select id="co2select" class="specselect" name="co2" > <option value="1000">co2</option> <option value="100"> <100 co2 </option> <option value="150"> <150 co2 </option> <option value="180"> <180 co2</option> </select> <select id="doorsselect" class="specselect" name="doors" > <option value="none">doors</option> <option value="two"> 2 </option> <option value="three"> 3 </option> <option value="four"> 4 </option> <option value="five"> 5 </option> </select> <select id="trunkselect" class="specselect" name="trunk" > <option value="0">trunk </option> <option value="300"> >300 l </option> <option value="500"> >500 l </option> <option value="700"> >700 l </option> </select>
and jquery:
$(function(){ $("#filtermodel select").change(function (){ if("select option:selected"){ $(this).css("background", "#e90707"); $(this).css("color","#ffffff"); } else{ $(this).css("background", ""); $(this).css("color","#696969"); } }); });
$("#filtermodel select").change(function (){ var selected = $(this).find("option:selected"); var first = $(this).find("option:first"); if(selected.val()!=first.val()){ $(this).css("background", "#e90707"); $(this).css("color","#ffffff"); } else{ $(this).css("background", ""); $(this).css("color","#696969"); } });
Comments
Post a Comment