Question

我有一个＆lt; select＆gt;我在运行时动态填充不同值的元素。

我使用下面的代码清除＆lt;选项＆gt;元素，然后用新的重新加载它。它适用于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并尝试远离它，如果有更好的方法从对象的属性动态填充＆lt; select＆gt;元素请显示如何）

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

alt text

这是怎么回事？它应该显示Text Visualizer窗口中显示的元素（第一个屏幕截图）。为什么没有显示新值？

Answer 1

我看了一下jQuery empty()函数，它在内部调用了removeChild。似乎IE在removeChild元素上调用<select>时无法可靠地工作。

所以我重写了我的loadPickerFromObject函数，以使用createElement，add和remove函数代替jQuery的$([html])，appendTo和{ {1}}函数。

我的代码现在可以在Chrome，Firefox和IE中正常使用。

Answer 2

您可以使用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 3

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 4

我认为如果你构建一个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 5

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);
        }
    }
}

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

5 个答案: