Question

我正在动态创建一个包含选项节点的选择节点。该代码在FF＆amp; IE8。

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

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

1 个答案: