jQuery 选择选项列表在 IE6 中的更新速度不够快

Question

我有一个 SELECT 列表，我根据 ajax 调用的结果填充该列表，然后根据之前设置的变量选择其中一个选项。这在 IE8 上效果很好，但在 IE6 上却不行。

这是原来的功能：

function LoadCategories(jdata)
{
    var options = '';
    for (var i = 0; i < jdata.length; i++)
    {
        options += '<option value="' + jdata[i].CategoryName + '">' + jdata[i].CategoryName + '</option>';
    };
    $("select#categorySelect").html(options);
    $("select#categorySelect").val(currentPatientCategory).attr('selected',true);
};

在 IE6 上，这会产生错误：“无法设置选定的属性。未指定的错误。”

如果我将最后一条语句更改为：

setTimeout('$("select#categorySelect option[value=" + currentPatientCategory + "]").attr("selected", true)', 1000);

这似乎有效。我还尝试使用适当的语法将 .html() 更改为使用 .append()、.appendTo()。我还尝试对所选项目使用变量但没有成功。同样，它们适用于 IE8，但不适用于 IE6。在所选值设置之前放置一个 alert() 也可以。似乎选项在列表中的放置速度不够快，以至于下一条语句无法实际找到它们，除非我以某种方式延迟选择。

在没有一些“解决方法”（如 setTimeout）或将选择移动到其他地方的情况下，有什么方法可以正常工作，从而有效地延迟它的执行？

注意：如果我在 setTimeout 中将 1000 更改为 100，它会在部分时间和部分不工作，因此我也不完全信任此解决方案。

使用 jQuery 1.4.2

注意：由于计算机较旧，并且在一组非常严格的环境中存在更新法规/挑战，客户群要求支持 IE6。

编辑：请注意，我终于结束了。在通过 ajax 生成一些数据和在 IE6 中表现出来的使用之间存在竞争条件。我通过在我的代码中移动一些语句来解决问题，以针对这样生成的未解析数据对象的解决方案进行防弹。非常感谢海报，因为它为我指明了解决此问题的可行方向。

Answer 1

我什至不敢相信使用.html() 代替.append() 或.appendTo() 会起作用。您基本上所做的是从select element 本身覆盖html代码。
所以你真的应该使用.append()。

setTimeout() 听起来更奇怪。

我猜你正在寻找的是替换这一行：

$("select#categorySelect").val(currentPatientCategory).attr('selected',true);

用这个：

$("select#categorySelect").find('option').eq(currentPatientCategory).attr('selected', 'selected');

..别忘了使用.append()..

参考：.append()，.eq()

Answer 2

$("select#categorySelect").val(currentPatientCategory).attr('selected',true);

val(currentPatientCategory) 将选定选项设置为值与currentPatientCategory 匹配的选项。这没关系，您不必去寻找正确的option 元素来设置selected。

我不知道链接的.attr 调用是为了什么。 <select> 没有 selected 属性。我想这就是错误试图告诉你的。

options += '<option value="' + jdata[i].CategoryName + '">' + jdata[i].CategoryName + '</option>';

这很危险。您在 HTML 标记中包含一些文本，而无需对其进行 HTML 转义。如果该文本中有<、& 或" 字符，则您的标记将中断，并且如果该文本是用户提交的，则存在跨站点脚本安全问题。

如果您创建包含文本字符串的 HTML，您必须将这些字符分别用 HTML 转义为 <、& 和 "。但通常使用属性设置方法来设置它们比使用标记更容易：

$('#categorySelect').empty();
for (var i= 0; i<jdata.length; i++) {
    var option= $('<option/>', {text: jdata[i].CategoryName, val: jdata[i].CategoryName});
    $('#categorySelect').append(option);
}

不过更简单的是老式的 DOM 方式：

var options= $('#categorySelect')[0].options;
options.length= 0;
for (var i= 0; i<jdata.length; i++)
    options[i]= new Option(jdata[i].CategoryName);