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

Question

我正在动态创建一个选择节点，其中包含选项节点。该代码在 FF 和 IE8 中运行良好。

但它拒绝在 IE8 的 quirks 模式或 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/

有谁知道如何欺骗 ie 重新渲染 DOM 的一部分？

问题在于通过点击事件调用 AddListItems 函数而不是直接调用它。

Answer 1

The option nodes do get added to the DOM.

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

PersonnelSelectorListBox.hide().show();

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

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