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


Tags: jquery,css

Problem :

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


Solution :

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

    CSS Howto..

    How to control a

    My jquery slideshow is not functioning properly

    How to get CSS in Javascript working correctly

    How to give priority to a div in terms of overlapping divs on a drop down menu?

    how to use dynamic css in jsp file base on param value

    How to make a div fade on hover?

    How to assign a css class to echo $output

    Why do the Google Fonts fail to show up on my website?

    How can I fade in new HTML elements with CSS [duplicate]

    html, css - how to use display: inline-block

    how to set menu to activate always hover effect on [closed]

    How to restrict CSS animation to a certain div?

    How to get an HTML div to dynamically expand in a horizontal direction to fit window width?

    how can I center the image in my div? (so far the left border of my img is centered)

    Want to duplicate css styles for an ID based style, how to do this with least duplication?

    using the unorthodox `head {display: block}` to show text to user?

    How to make css jquery autofit navigation?

    How to formatting a simple
      in columns and bolding the first item on its own line

    How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?

    How to use nth-child() but not for child in CSS?

    How to make headers glossy in IE7,8,9 using CSS

    CSS: How to display image icon before each h3 in CSS?

    How to stretch background image of a table cell with CSS?

    How to color specific word in a container using CSS

    How do you override “-moz-user-select: none;” on a child element?

    How do I scale the size of the elements in my HTML according to screen size?

    How does Outlook.com have the title text underlined?

    How do I change ASP.NET App_Themes based on what Skin is selected in RadSkinManager?

    How to properly adjust CSS Form Select field if content is larger than image

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?