为什么使用 javascript 动态填充选择下拉列表元素在 IE 中不起作用？

Question

我有一个<选择>我在运行时动态填充不同值的元素。

我使用下面的代码来清除

元素，然后用新元素重新加载。它适用于 Firefox 3.6.6 和 Chrome 5.0。

function loadPickerFromObject(pickerControl, values) {
    pickerControl.empty();
    for (var nameProperty in values) {
        if (!$.isFunction(values[nameProperty])) {
            var option = $("<option></option>")
                .text(values[nameProperty])
                .attr("value", nameProperty)
                .appendTo(pickerControl);
        }
    }
}

（我不喜欢编写 javascript，并尝试远离它，如果有更好的方法从对象的属性动态填充 元素，请展示如何

操作）它在 IE 8 中不起作用当我使用 Visual Studio 进行调试时，我可以看到新项目已正确加载，但当我检查页面时，它们没有更新并显示旧项目。

这是怎么回事？它应该显示文本可视化工具窗口中显示的元素（第一个屏幕截图）。为什么它不显示新值？

Answer 1

您可以使用 add() 方法。所以你的代码看起来像：

function loadPickerFromObject(pickerControl, values) {
    pickerControl.empty();
    for (var nameProperty in values) {
        if (!$.isFunction(values[nameProperty])) {
            pickerControl.add("<option></option>")
            .text(values[nameProperty])
            .attr("value", nameProperty);
        }
    }
}

Answer 2

Internet Explorer 喜欢缓存数据。

尝试CTRL + F5。

并且您可以使用CTRL + SHIFT + DEL打开对话框，您可以在其中显式清除缓存。

如果这会产生影响，您可能需要考虑添加标头以尝试阻止这种情况发生。 例如：

<META HTTP-EQUIV="cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

听起来您是在发出 ajax 数据请求吗？
您还可以尝试：

jQuery.ajaxSetup({ cache: false });

Answer 3

我认为如果你构建一串 html 并在最后附加到 dom 上，那就更好了。
而不是每次都操作dom。
像这样的东西：

function loadPickerFromObject(pickerControl, values) {  
    pickerControl.empty();  
    var optionsHtml;

    for (var nameProperty in values) {  
        if (!$.isFunction(values[nameProperty])) {  
            optionsHtml += "<option value='" + nameProperty  + "'>" + 
                                values[nameProperty] + 
                           "</option>";
        }  
    }

    pickerControl.append(optionsHtml);

}

Answer 4

GiddyUpHorsey 是正确的，问题出在 removeChild 上。
不过，有一种非常简单的方法可以清除select。

mySelect.options.length = 0

所以你可以这样做：

function loadPickerFromObject(pickerControl, values) {
    pickerControl[0].options.length = 0;
    for (var nameProperty in values) {
        if (!$.isFunction(values[nameProperty])) {
            pickerControl.add("<option></option>")
            .text(values[nameProperty])
            .attr("value", nameProperty);
        }
    }
}

Answer 5

我查看了 jQuery empty() 函数，它在内部调用 removeChild。 IE 似乎无法可靠地在 元素上调用 removeChild 。

因此，我重写了 loadPickerFromObject 函数，以使用 createElement、add 和 remove 函数，而不是 jQuery 的 $ ([html])、appendTo 和 empty 函数。

我的代码现在可以在 Chrome、Firefox 和 IE 中正常运行。