Question

We use jQuery UI selectmenu, it rewrites our drop down boxes like so:

<select style="width: 324px; display: none;" id="speedA" name="fruits">
    <option value="NA">Please Select</option>
    <option value="A">Apple</option>
    <option value="O">Orange</option>
    <option value="P">Pear</option>                         
</select>

<a aria-owns="speedA-menu" aria-haspopup="true" tabindex="0" href="#" role="button" id="speedA-button" class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown ui-state-active ui-corner-top" style="width: 312px; background: none repeat scroll 0% 0% rgb(239, 239, 239); border: 1px solid rgb(236, 0, 140);"><span class="ui-selectmenu-status">Apple</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>

We have a bit of jquery which changes the background and border of this select menu if the option hasn’t been changed, which works perfectly (as you can see in the HTML above, the <a> link has already got the error colors assigned to it within style""):

if(bizzstate == "NA") $('#speedA-button').css({"background":"#efefef","border":"1px solid #ec008c"});

The problem we are having, is getting this to change back to its default colors, when it is changed:

$('#speedA-button').change(function() {
    $('#speedA-button').css({"background":"","border":"1px solid #AAAAAA"});
});

The above code doesn’t seem to work.. it just stays as its old colors.

Any help would be greatly appreciated

Update
=========

Figured out why, its because the thing changing is:

<span class="ui-selectmenu-status">Apple</span>

NOT:

<a id="speedA-button" class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown error_input ui-corner-all" aria-owns="speedA-menu" aria-haspopup="true" tabindex="0" href="#" role="button" style="width: 312px;">

How do we append a change function to the span above?

Answer 1

Put the css into a class.

Add the class to the element:

if(bizzstate == "NA") $('#speedA-button').addClass("specialColors");

Then remove the class from the element when you dont need it:

$('#speedA').change(function() { $('#speedA-button').removeClass("defaultColors"); });