使用jQuery動態呈現選擇框的問題

Question

我正在動態創建一個選擇節點，其中包含選項節點。該代碼在FFIE8中正常工作。

但它拒絕在奇怪模式或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/