代码之家  ›  专栏  ›  技术社区  ›  Raynos

使用jquery动态呈现选择框时出现问题

  •  4
  • Raynos  · 技术社区  · 14 年前

    我正在动态创建一个包含选项节点的select节点。该代码在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/

    有人知道如何欺骗IE使其重新发送DOM的一部分吗?

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

    1 回复  |  直到 11 年前
        1
  •  7
  •   Andy E    14 年前

    选项节点会被添加到DOM中。

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

    PersonnelSelectorListBox.hide().show();
    

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

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