使用jQuery动态呈现选择框的问题

Question

我正在动态创建一个包含选项节点的选择节点.该代码在FF和IE8中工作正常.

但它拒绝在怪异模式或ie7兼容模式下在IE8中工作.它拒绝在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函数,而不是直接调用它.

Answer 1

选项节点确实会添加到DOM中.

是的,这绝对是一个渲染错误.我能找到的唯一真正的解决方法是在添加<option>元素后隐藏选项框并再次显示:

PersonnelSelectorListBox.hide().show();

这会强制浏览器正确地重新呈现内容.

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