Question

I have a page which has a number of <select /> elements with a size of “4”. Of these some of them are disabled. IE 8 in its wisdom has decided not to show the selected items for these list boxes (the page is fine in other browsers). I tried to color them using jQuery. It seems to work locally. But when I publish this to my development server it stops working. This is the jquery I was using:

$(document).ready(function () {
        $('select').each(function () {
            if ($(this).attr('size') != undefined && $(this).attr('size') > 1 && $(this).attr('disabled') == 'disabled') {
                $(this).find('option[selected=selected]').each(function () {
                    $(this).css('background-color', '#15317E');
                });
            }
        });
    });

I also tried the suggestions in the following pages, but that also don’t seem to work.

References:

• http://www.webmasterworld.com/css/4078501.htm
• Styling disabled <select> (dropdown boxes) in HTML (this is for a drop down, still i tried it, it colors the entire list box but still does not highlight the selected item – now i am trying to change the css to just color the selected option alone)

It would be great if you could give me any suggestions!

Thanks!

Answer 1

Ah, at last I found the issue. For some reason the server instance did not recognize this jQuery:

$(this).find('option[selected=selected]').each(function () {
...
}

I have no idea why though, because the development machine and the server have the same version of jQuery, so will have to check that out.

So when I changed it to the following both my local and the development server started highlighting the selected item’s color!

$(document).ready(function () {
        $('select').each(function () {
            if ($(this).attr('size') != undefined && $(this).attr('size') > 1 && $(this).attr('disabled') == 'disabled') {
                $(this).find('option').each(function () {
                    if ($(this).attr('selected') == 'selected') {
                        $(this).css('background-color', '#15317E');
                    }
                });
            }
        });
    });

Thanks!