Question

我已经设置了一个问题的jsFiddle示例：Example

鉴于此html：

<select id="drop1" data-jsdrop-data="countries"></select>
<select id="drop2" data-jsdrop-data="countries2"></select>

以下javascript：

var countries = {"1" : "Albania", "5" : "Australia","2": "United Arab Emerates"};
var countries2 = {"AL" : "Albania", "AU" : "Australia", "AE" : "United Arab Emerates"};


function loadJSOptions(selector, list) {
    $.each(list, function (key, value) {
        $(selector).append($("<option></option>").val(key).html(value));
    }
});

$(document).ready(function() { 
    $('select[data-jsdrop-data]').each(function() {
       var selector = $(this);
       var listname = selector.attr("data-jsdrop-data");
       var listvalue = null;
       eval("listvalue = " + listname + ";");
       loadJSOptions(selector, listvalue);
    });
});

任何人都可以向我解释为什么带有Alpha键的列表会根据输入的顺序列出，而带有数字键的列表会根据键进行排序？如果你看看jsFiddle结果，你会看到drop1显示阿尔巴尼亚，阿拉伯联合酋长国，澳大利亚，而drop2显示阿尔巴尼亚，澳大利亚，阿拉伯联合酋长国。

感谢您的帮助。

Answer 1

对象属性不是有序的，如果枚举它们，则顺序是实现定义的。它们通常按照解析对象文字的顺序存储，但您不能依赖它。例如，数字键（如countries1）似乎在您的浏览器中排序。

如果你想要一个明确的顺序，使用一个数组（一个带有数字键的对象）并迭代它们：

var lists = {
    countries1: [
        {key:"1", val:"Albania"},
        {key:"5", val:"Australia"},
        {key:"2", val:"United Arab Emerates"}
    ],
    countries2: [
        {key:"AL", val:"Albania"},
        {key:"AU", val:"Australia"}, 
        {key:"AE", val:"United Arab Emerates"}
    ]
};

$(document).ready(function() { 
    $('select[data-jsdrop-data]').each(function() {
        var $this = $(this),
            listname = $this.attr("data-jsdrop-data"),
            list = lists[listname]; // don't use eval!
        for (var i=0; i<list.length; i++) {
            var item = list[i];
            $this.append($("<option>").val(item.key).text(item.value));
        }
    });
});

for循环比$.each更快，更直观。当你不确切地知道它做什么以及什么时候需要它时，不要使用它。

Answer 2

我相信如果你在一个对象上有一个数字属性，那么jQuery.each()将需要使用对该属性的数组类型访问（即countries[1]，countries[2]，{{1} }）。因此，它将以数字索引顺序迭代。

Answer 3

使用jQuery的$.each默认为for( a in b ) 不保证订单。这就是您看到订单看起来非顺序或意外的原因。

Answer 4

您可以使用以下方式更有效地构建选项：

$('select[data-jsdrop-data]').each(function() {
    var list = window[this.getAttribute('data-jsdrop-data')];
    var i = 0;
    for (var p in list) {
        this.options[i++] = new Option(p, list[p]);
    }
});

在javascript键值对象中排序顺序差异

4 个答案: