通过Ajax <select>填充：JSON对象与回显HTML？</select>

Question

我有一个<select>元素，我需要填充从Ajax调用获得的值。我正在讨论是否让Ajax返回一个正确的键/值JSON对象，或者让它回显出一堆<option>元素。选项中的选项需要按字母顺序显示。

我觉得使用JSON对象是正确的方式。但是当返回该对象时，我必须按名称而不是值来完成对JSON对象进行排序的过程。例如：

我的PHP返回以下JSON对象响应：

{"21":"Bandana","18":"Baseball","19":"Cowboy","20":"Trucker"}

这是我希望项目在<select>元素中显示的正确顺序。但是当Ajax回调获取JSON对象时，它按键而不是值排序：

{"18":"Baseball","19":"Cowboy","20":"Trucker","21":"Bandana"}

因此，遍历此JSON对象并将<option>附加到<select>将导致值不按字母顺序排列。所以现在，我必须在使用之前对其进行排序。

或者，如果我只是完全抛弃JSON对象并让我的PHP执行此操作：

foreach ( $array as $key => $value )
    echo "<option value='$key'>$value</option>";

现在，回到我的Ajax回调中，我所要做的就是将输出附加到我的<select>，我很高兴。所有东西都经过整理，效果很好。

所以最后，我觉得JSON是正确的方式来做到这一点，但你必须跳过几个箍来达到目标​​。我不知道有简单的JSON对象技巧吗？如果我必须重新格式化回调中的数据，为什么我会在这种情况下使用JSON对象？

Answer 1

使用JSON数组而不是对象。

[{"key": "21", "value":"Bandana"},{"key":"18", "value":"Baseball"},{"key": "19", "value":"Cowboy"},{"key":"20","value":"Trucker"}]

对象的属性名称不以任何特定顺序维护。也就是说，当您使用JavaScript for ... in循环遍历对象的属性名称时，未定义顺序。运行时系统可以按任意顺序为您提供名称;我认为它不一定是可重复的。

Answer 2

我更喜欢带有数组数组的json。第一个元素是键，第二个元素是值。

[[21,"Bandana"],[18,"Baseball],[19,"Cowboy"],[20,"Trucker"]]