Order HTML 根据数据顺序选择

Question

我有一个使用数据库中的数据填充的 html 选择。该查询基于显示顺序（数据库中的另一个字段）进行排序。

返回的数据：id、名称

示例：{"1":"First","11":"Second","10":"Third"}

添加到select时，根据id排序，如下：

First  
Third  
Second

将数据添加到选择时如何保持数据的顺序？

Answer 1

我通过更改返回数据的格式解决了这个问题，使其包含显示顺序以及 id 和名称：

例如：[{"id":"4","name":"Name One","display_order":"1"},{"id":"2","name":"Name Two" ,"display_order":"2"}]

Answer 2

一种选择是将 json 对象转换为数组（每个属性都将是数组中的一个元素），然后按名称对数组进行排序，并将其附加到选择中：

var json = {"1":"First","11":"Second","10":"Third"};
var list = new Array(); 

// insert all the properties and their values into an array of objects
for(var propName in json) {
    list.push({ "id": propName, "value":json[propName] });
}

// sort the array using the value instead of the id
list.sort(function compare(a,b) {
              if (a.value < b.value)
                 return -1;
              else
                 return 1; // we consider that if they have the same name, the first one goes first
            });

// append the options in order in the select
for (var x = 0; x < list.length; x++) {
    $("#mySelect").append("<option value='" + list[x].id + "'>" + list[x].value + "</option>");
}

您可以see it working on this jsfiddle。