Jquery append <select> 在 IE7 中不起作用，但在 Firefox 中起作用答案

【问题标题】：Jquery append <select> not working in IE7, but works in firefoxJquery append <select> 在 IE7 中不起作用，但在 Firefox 中起作用
【发布时间】：2010-10-18 00:30:42
【问题描述】：

我通过 AJAX 从数据库中获取数据并将标签附加到选择语句。以下代码在 Firefox 中有效，但仅在 IE 中部分有效。 IE 中的问题是在下拉列表中创建选项元素，但“文本”属性值为空（下拉列表出现 30 个空白行！但是，“值”属性值设置正确（这是 hte 主键来自我的数据库）。除了“文本”之外，我还需要在 IE 中设置其他字段吗？下面代码中的粗体文本是我认为问题所在。顺便说一句，值不为空，我尝试输入一个字符串文字在它的位置，它在 IE 中仍然是空白的。

代码是：

$.each(data, function(key,value){
    $("<option>").attr("value", key).attr("text",value).appendTo("#select1");
});

【问题讨论】：

标签： jquery firefox internet-explorer-7 drop-down-menu append

【解决方案1】：

我会尝试使用 .text() 代替：

  $.each(data, 
       function(key,value){ 
           $("option").attr("value", key)
                .text(value)
                .appendTo("#select1"); 
        });

我想这就是你想要的？

【讨论】：

是的，您的解决方案在 IE 和 Firefox 中都能正常工作！互联网上有很多使用 .attr("text", value) 的例子，我猜这是错误的。非常感谢您的解决方案！
还要记住 .text() 会自动转义您在其中设置的任何 HTML，即 .text("foo") 将被设置为 "<em>foo< /em>”。如果要在其中包含 HTML，请使用 .html()。

【解决方案2】：

我认为发布的解决方案不正确。我认为应该是：


$.each(data, function(key,value){ 
           $("").attr("value", key)
                .text(value)
                .appendTo("#select1"); 
        });

不是


$.each(data, function(key,value){ 
           $("option").attr("value", key)
                .text(value)
                .appendTo("#select1"); 
        });

不知何故掉了。

【讨论】：

【解决方案3】：

让我们用块引号再试一次：

解决办法应该是：

$.each(data, 
       function(key,value){ 
           $("<option>").attr("value", key)
                .text(value)
                .appendTo("#select1"); 
        });

“options”需要用

包围

【讨论】：

【解决方案4】：

altCognito 是正确的......但是，如果您正在循环整数，请确保使用

key/value.toString() - 虽然 jQuery 不会抛出任何错误并会处理它，但它会避免额外的开销。

一切都与性能有关，对吧？ :)

$.each(data,  
       function(key,value){  
           $("option").attr("value", key.toString()) 
                .text(value.toString()) 
                .appendTo("#select1");  
        });

【讨论】：

我发现在IE7（标准模式）下，如果你使用$('', {value: index.toString()})，其中index是一个数字，