0

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

鉴于此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);
    });
});

谁能向我解释为什么带有字母键的列表是根据输入的顺序列出的，而带有数字键的列表是根据键排序的？如果您查看 jsFiddle 结果，您会看到 drop1 显示 Albania, United Arab Emerates, Australia 而 drop2 显示 Albania, Australia, United Arab Emerates。

谢谢你的帮助。

4

4 回答 4

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. 当您不确切知道它的作用以及何时需要它时，请不要使用它。

于 2012-11-27T21:30:35.797 回答
0

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

于 2012-11-27T21:22:52.007 回答
0

使用 jQuery 的$.each默认值for( a in b )不能保证 order。这就是为什么您看到订单似乎不连续或出乎意料的原因。

于 2012-11-27T21:29:02.693 回答
0

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

$('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]);
    }
});
于 2012-11-27T23:09:50.400 回答