jquery - 在 SELECTED 上使用 JQUERY 更改后如何将 SELECT 返回到默认 CSS

Question

我想在一系列 SELECT 上突出显示用户的选择，这是我用 JQUERY 完成的。

问题是，如果 SELECT 返回到默认位置，它不会变回“普通”SELECT(没有突出显示)。

此外，JQUERY 的更改以某种方式更改了 SELECT BOX 的格式。

请在 http://jsfiddle.net/BernardA/bM3p4/ 查看 fiddle

这些天我的网络连接受限，所以我回复查询的速度可能会很慢。

感谢您的帮助!

HTML 如下:

<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>

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

Answer 1

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