how to return SELECT to default CSS after changing with JQUERY on SELECTED

Question

I want to highlight the user's choices on a series of SELECT, which I have accomplished with JQUERY.

Problem is that if the SELECT is returned to the default position it does not change back to 'plain' SELECT ( without the highlight).

Additionally the change with JQUERY changes the format of the SELECT BOX, somehow.

Please see fiddle at http://jsfiddle.net/BernardA/bM3p4/

My internet connection is limited these days, so I may be slow to respond to queries.

Thanks for your help!

The HTML is as 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 the 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"); 
}
});
});

Anupam · Accepted Answer · 2013-07-18 11:18:14Z

2

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

answered Jul 18, 2013 at 11:18

Anupam

8,0263 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BernardA Over a year ago

Thanks Anu, that works fine. Any idea why the format of the select box changes when this script is applied?

Anupam Over a year ago

Yeah. Here I am checking if the selected option is NOT the first(default) option only then apply the highlighting else fall back to the normal view.

DFord · Accepted Answer · 2013-07-18 11:25:36Z

0

Even when you selected you default value, you were still changing the background color because the Fuel was being selected. I fixed the jsfiddle here: http://jsfiddle.net/bM3p4/2/

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

;

answered Jul 18, 2013 at 11:25

DFord

2,3584 gold badges37 silver badges53 bronze badges

1 Comment

BernardA Over a year ago

Thanks, DFord. Your solution works for the first select, but not the others. Anu's solution works for all. Thanks anyway.

Collectives™ on Stack Overflow

how to return SELECT to default CSS after changing with JQUERY on SELECTED

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related