Проблема с динамическим рендерингом окна выбора с помощью jQuery

Question

Я динамически создаю узел выбора с узлами параметров внутри. Код отлично работает в FF и IE8.

Но он отказывается работать в IE8 в режиме совместимости или в режиме совместимости ie7. И он отказывается работать в IE6.

Узлы опций добавляются в 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);

Пример кода http://jsfiddle.net/jKmh4/3/

Кто-нибудь знает, как обмануть, т.е. перерисовать часть DOM?

Проблема заключается в вызове функции AddListItems через событие click, а не в ее непосредственном вызове.

Answer 1

Узлы опций добавляются в DOM.

Да, это определенно ошибка рендеринга. Единственный реальный обходной путь, который я смог найти, - это скрыть поле параметров и показать его снова после добавления элементов <option>:

PersonnelSelectorListBox.hide().show();

Это заставляет браузер правильно визуализировать содержимое.

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