Ugh
The whiteboard at work which we use for Nerf target practise currently has a nice blue IE6 logo serving as the bullseye. I lost three frustrating hours today to that hell-spawned relic of Web 1.0, just trying to get it to add items to a drop-down select box via JavaScript...
Turns out both IE7 and IE6 have quite a few bugs in that area. IE7 isn't too bad - dynamically inserted items sometimes don't show up properly, but all that's required is to hide and immediately re-show the box and they turn up fine. In IE6, it appears that adding regular elements of type 'option' to a select box using select.appendChild() sometimes does absolutely nothing... you need to add Option objects to the options[] array instead.
Using Prototype syntax, you can't do:
select.appendChild( new Element( 'option', { value: 1 } ).update('foo') );
Instead you need:
var option = new Option('foo');
option.value = 1;
select.options[select.options.length] = option;
Luckily, the options[] array is w3c-approved and supported by the four big browsers - no IE-specific hacks here. It just took me far too long to wade through the myriad IE bugs to find one which had any bearing on my specific problem, and even longer trying to create a test case - of course, the bug wouldn't manifest itself in any of my test cases!
At least I didn't have to go for my last-ditch solution:
select.outerHTML = select.outerHTML;
It *did* fix the problem, but at the expense of invalidating every reference to the select box, and losing every event listener listening to it...
Turns out both IE7 and IE6 have quite a few bugs in that area. IE7 isn't too bad - dynamically inserted items sometimes don't show up properly, but all that's required is to hide and immediately re-show the box and they turn up fine. In IE6, it appears that adding regular elements of type 'option' to a select box using select.appendChild() sometimes does absolutely nothing... you need to add Option objects to the options[] array instead.
Using Prototype syntax, you can't do:
select.appendChild( new Element( 'option', { value: 1 } ).update('foo') );
Instead you need:
var option = new Option('foo');
option.value = 1;
select.options[select.options.length] = option;
Luckily, the options[] array is w3c-approved and supported by the four big browsers - no IE-specific hacks here. It just took me far too long to wade through the myriad IE bugs to find one which had any bearing on my specific problem, and even longer trying to create a test case - of course, the bug wouldn't manifest itself in any of my test cases!
At least I didn't have to go for my last-ditch solution:
select.outerHTML = select.outerHTML;
It *did* fix the problem, but at the expense of invalidating every reference to the select box, and losing every event listener listening to it...