如何使用jQuery按文本顺序绑定HTML选择框

Question

我有一个JSON字符串，如下：

 json={"0":"-select-","10":"A","5":"B","14":"C"};

这段文本是从 PHP 代码中按照文本 A、B、C 排序返回的。

我正在使用 jQuery 将这个 JSON 字符串绑定到下拉框中：

$.each(json,function(k,v){
    $('#UserCityRes').append('<option value="'+k+'">'+v+'</option>');
});

但是它按值顺序给出选择列表如下所示：

<select name="citylist" id="UserCityRes">
 <option value="0">select</option>
 <option value="5">B</option>
 <option value="10">A</option>
 <option value="14">C</option>
</select>

我想按照文本顺序而不是值的顺序来排序文本，但是jQuery的$.each函数是按照值的顺序附加它的。请帮忙解决如何按文本排序和显示（在火狐浏览器中可以正常工作，但在IE和Chrome浏览器中却不能）。

提前致谢。

- Dashrath

---

如果想保留项目的顺序，我建议使用类似于[{ "key": "0", "value": "-select-"}, { "key": "10", "value": "A"}, { "key": "5", "value": "B"}, { "key": "14", "value": "C"}]的数组/集合。 - Arun P Johny

$.each(json,function(k,v){ $('#UserCityRes').append('<option value="'+v.key+'">'+v.value+'</option>'); }); - Dashrath

谢谢Arun，我按照你给出的格式制作了我的JSON字符串，并像我的代码一样迭代它。这很有效。 - Dashrath

我会将其作为答案发布 - Arun P Johny

Answer 1

如果想要保留物品的顺序，我建议使用类似于数组/集合的结构，例如：

[{ "key": "0", "value": "-select-"}, { "key": "10", "value": "A"}, { "key": "5", "value": "B"}, { "key": "14", "value": "C"}]

- Arun P Johny

Answer 2

对象是无序集合。你有两种方式 - 使用排序的键来保存id和值的引用，或者使用数组 - 类似于

{ "values": [
   { "bar": "foobar" },
   { "foo": "foobaz" }
] }

您可以使用 for (i = 0; i < len; i++) 循环遍历数组并保持原始顺序。

欲了解更多信息，请查看 此处。

- Mateusz

Answer 3

对象中的属性没有特定的顺序。将其转换为对象数组，然后您可以对其进行排序，因为一旦排序，数组会保留顺序：

var items = $.map(json, function(v, k){ return { value: k, text: v }; });
items.sort(function(x,y){ return x.text < y.text ? -1 : 1 });

- Guffa

Answer 4

请问您能否参考以下代码。

var values = [];
for(var i in json.message) {
   values.push({ key: i, value: json.message[i] });
}
values.sort(function(a, b) { return a.value.localeCompare(b.value); });
var str = values.map(function (kvp) { return kvp.value; }).join('\n');

谢谢，

Siva

- SivaRajini