如何在使用JQUERY更改选定内容后将SELECT返回到默认CSS
我想在一系列SELECT上突出显示用户的选择,这是我用JQUERY完成的 问题是,如果选择返回到默认位置,它不会变回“普通”选择(没有突出显示) 此外,JQUERY的更改以某种方式改变了选择框的格式 请看小提琴 这些天我的网络连接很有限,所以我对询问的反应可能很慢 谢谢你的帮助 HTML如下所示:如何在使用JQUERY更改选定内容后将SELECT返回到默认CSS,jquery,css,Jquery,Css,我想在一系列SELECT上突出显示用户的选择,这是我用JQUERY完成的 问题是,如果选择返回到默认位置,它不会变回“普通”选择(没有突出显示) 此外,JQUERY的更改以某种方式改变了选择框的格式 请看小提琴 这些天我的网络连接很有限,所以我对询问的反应可能很慢 谢谢你的帮助 HTML如下所示: <form id="filtermodel"> <select id="fuelselect" class="specselect" name="fuel" > <op
<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>
即使选择了默认值,您仍在更改背景色,因为正在选择燃油。我在这里修复了JSFIDLE:
) 谢谢Anu,这很好用。知道为什么应用这个脚本时选择框的格式会改变吗?是的。在这里,我检查所选选项是否不是第一个(默认)选项,然后应用高亮显示,否则将返回到正常视图。谢谢,DFord。您的解决方案适用于第一个选择,但不适用于其他选择。Anu的解决方案适用于所有人。无论如何,谢谢你。
$(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");
}
});
$(function(){
$("#filtermodel select").change(function (){
if($("#filtermodel option:selected").val() === "none"){
$(this).css("background", "");
$(this).css("color","#696969");
} else if("select option:selected"){
$(this).css("background", "#e90707");
$(this).css("color","#ffffff");
}
});
})