changing <select> background color

lyakasal · Joined: 22 Jan 2005 Posts: 2

hello,
I am trying to change the background color of a select listbox,
then display some message and then change it again:

var prev_color = select.style.backgroundColor;
select.style.backgroundColor = 'red';
alert('Message');
select.style.backgroundColor = prev_color;

But when I have only one item in my listbox, this does not seem to work...

kanenas · Joined: 14 Dec 2004 Posts: 191

The code fragment you gave worked fine for me. Is it only called from an onchange event handler?

lyakasal · Joined: 22 Jan 2005 Posts: 2

OK, the problem was that the size of the listbox was 6,
but it held just one <option>.
So when changing the background color, the "empty spaces" were
not affected (for some reason:)).

I solved it by temporarily adding empty Options and removing them
after the alert message.

Here is the code:
--------------------------------------------------------------------------
//Add some empty options, to match the size of the select box,
// otherwise the style change behaves weird
var options_to_add = select_elem.size - select_elem.length;
var added_options = 0;
for (added_options = 0; added_options < options_to_add;
++added_options)
select_elem.add(new Option(" "));

//OK, now change the style
var prev_class = select_elem.className;
select_elem.className = "select_default_error"; //
select_elem.focus();

alert("Message");

//change the style back and remove the added extra options
select_elem.className = prev_class;
for ( ; options_to_add > 0; --options_to_add)
select_elem.options[select_elem.length - 1] = null;
--------------------------------
Clever, no?
Tell me what you think.

kanenas · Joined: 14 Dec 2004 Posts: 191

I tried the example again in Mozilla after setting the 'size' attribute and it still worked. That's when I figured it was an IE bug. If the number of options in a select box is less than the size and the background is changed, IE repaints only the portion of the select covered by options (try having 3 options with the select box size set to 6). Occluding then uncovering the select box will cause the background to be drawn in the area not containing options. This is definitely a bug; the repaint should be the same, whether IE or Windows initiates it.