javascript - 可以用 $.each(..) "destroy"填充我的 map 在 IE 中的顺序吗？

Question

我的问题:

我知道这听起来很有趣，但这是我的问题:我有一个 select，它是通过 Ajax 以下列方式成功填充的:

$.each(data, function(key, value) {
            options += '<option value="' + key + '">' + value + '</option>';
        });

我的服务器返回一个排序的 map (按值排序)。一切正常，但是在 Internet Explorer(7、8 和 9)中，选择显示为未排序。

我发现了什么:

我发现 IE 实际上显示它是按我传递给 value 参数的 key 排序的。我的列表在后端按 value 排序，我想这样显示它(在 Chrome、Firefox 等上运行良好)。

我认为这种排序最有可能的原因是 $.each jQuery 函数。也许它正在按键迭代？不过，我对此不确定，所以我希望得到一些反馈。另外，我如何在 map 上进行替代迭代以确保这一点？我试图避免执行 jQuery 排序，因为排序是在后端完成的。

我提到我需要将 key 和 value 传递给 option，就像我传递它们的方式一样。

编辑 - 示例:

应该如何(在 Chrome 和 Firefox 上):

<option value="13">A</option>
<option value="2">B</option>
<option value="55">C</option>

在 IE 中是怎样的:

<option value="2">B</option>
<option value="13">A</option>
<option value="55">C</option>

Answer 1

您的问题是对象实际上并没有键/值对的特定顺序。 IE改不了就错了。使用数组来保存对，例如:

[
    {
        "value": "13",
        "text": "A"
    },
    {
        "value": "2",
        "text": "B"
    },
    {
        "value": "55",
        "text": "C"
    }
]

然后按如下方式循环:

$.each(data, function(index, option) {
    options += '<option value="' + option.value + '">' + option.text + '</option>';
});

最后，您不应该将 HTML 作为字符串来构建元素。使用 DOM。我想你有 someElement.html(options); 某处？好吧，让 options = someElement;，然后这样做:

$.each(data, function(index, option) {
    options.append(
        $('<option>').prop('value', option.value).text(option.text)
    );
});