CODEWITHSUNDEEP
javascriptjquerylistbox
k25
k25

Reputation: 407

IE 8 - Disabled Select List Box

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:

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

Thanks!

Upvotes: 2

Views: 2176

Answers (2)

jfrancis
jfrancis

Reputation: 1

Jquery for condition - $(this).attr('disabled') will return boolean.

So the condition in above conditional statement to be implemented as:

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

Same for selected items.

IE 8 Disabled property of select box will not show selected item if selected item is not visible on UI. IE 8 blocks scroll bar also. Say selected item is at 10th position in select box having size of 4. So 10th items will not be visible on screen. For such cases it is advisible change the size of disabled select box from 4 to 0. This will ensure that only selected item is visible in disabled Select box. Below is the code:

$(document).ready(function() { 
    $('select').each(function() { 
        if ($(this).attr('size') != undefined && $(this).attr('size') > 1 && $(this).attr('disabled')) { 
            $(this).attr('size', 0); 
        }
    });
});

Upvotes: 0

k25
k25

Reputation: 407

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!

Upvotes: 1

Related Questions