Question

我在JavaScript Select元素中创建时有些奇怪：

var items = {"3":"Three","1":"One","2":"Two"};
var elem = document.createElement("select");

for ( var key in items) {
    var ov = document.createElement("option");
    ov.value = key; 
    ov.appendChild(document.createTextNode(items[key]))
    elem.appendChild(ov);
}

document.getElementById('someDiv').appendChild(elem);

FF create选择具有初始元素顺序的元素（Three，One，Two）。 Chrome按键和按下一种方式输出元素（一，二，三）。

为什么会这样？如何防止Chrome中的排序？

Answer 1

for … in语句以不可预测的顺序迭代对象。作为MDC says：

for...in循环遍历一个对象的属性任意顺序（见delete operator 更多关于为什么不能依赖的原因迭代的看似有序性，至少在跨浏览器设置中。）

您最好使用一个对象数组并使用普通的for循环来保持指定的顺序，例如：

var items = [{"3":"Three"}, {"1":"One"}, {"2":"Two"}];

for (var i = 0; i < items.length; i++}
    /* etc */ ;

只是旁注：当使用for … in迭代对象时，你真的应该使用hasOwnProperty来检查它是否是一个继承的属性，否则你可能会在{{1}中包含继承的属性盒子。

动态创建的选择元素在FF和Chrome中是不同的

1 个答案: