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");  } }); }); 

demo here

$("#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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -