Question

I’m dynamically creating a select node with option nodes inside. The code works fine in FF & IE8.

But it refuses to work in IE8 in quirks mode or ie7 compatibility mode. And it refuses to work in IE6.

The option nodes do get added to the DOM.

var PersonnelSelectorListBox,
    PersonnelSelectorDiv;

function AddListItems() {
    for(var i = 1; i <= 3; i++){
        $('<option />').text('Item ' + i).appendTo(PersonnelSelectorListBox);
    }
}

PersonnelSelectorDiv = $("<div>").css({
    position: "relative", 
    display: 'block', 
    top: 20,
    zIndex: 2
});

$("#AddToList").after(PersonnelSelectorDiv);

$("#AddToList").click(function() {
    //alert("click");
    AddListItems();
});

PersonnelSelectorListBox = $("<select id=\"PLB\" size=\"15\">").attr({
    size: 15, 
    id: 'PLB'
}).width(200);

PersonnelSelectorDiv.append(PersonnelSelectorListBox);

Example code is http://jsfiddle.net/jKmh4/3/

Does anyone know how to trick ie into rerendering part of the DOM ?

The issue is with calling the AddListItems function via a click event rather then calling it directly.

Answer 1

The option nodes do get added to the DOM.

Yeah, it’s definitely a rendering bug. The only real workaround I could find was to hide the option box and show it again, after adding the <option> elements:

PersonnelSelectorListBox.hide().show();

This forces the browser to re-render the content properly.

http://jsfiddle.net/AndyE/jKmh4/4/