Question

我设法解析json数据并将此数据循环到select选项标记中。但数据排序相反。这是我的json文件：

{
  "items": [
    {"key": "First","value": 100},
    {"key": "Second","value": 200},
    {"key": "Last","value": 300}
  ]
}

这是我的html文件

<script type="text/javascript">
      $(document).ready(function(){
        $.ajax({
          url:'example.json',
          dataType:'json',
          success:function(item){
            $.each(item['items'], function(i,n){
              option = '<option value="'+n['value']+'">'+n['key']+'</option>';
              $("#show-data").after(option);
            });
          }
        });
      });
    </script>
  </head>
  <body>
    <select>
      <option id="show-data" value="" selected disabled>Please select an item</option>
    </select>
  </body>

这就是结果：

有没有办法让数据正确排序？

Answer 1

当您使用.after()时，会在迭代元素之后插入新元素。因此在完成时它会以相反的顺序。

您可以创建一个字符串，然后使用.after()

var options = '';
$.each(item['items'], function(i, n) {
  options += '<option value="' + n['value'] + '">' + n['key'] + '</option>';
});
$("#show-data").after(options);

但是，我建议您将ID属性指定为select元素，然后使用.append()

HTML 的

<select id="show-data">
  <option  value="" selected disabled>Please select an item</option>
</select>

脚本

$.each(item['items'], function(i, n) {
  var options += '<option value="' + n['value'] + '">' + n['key'] + '</option>';
  $("#show-data").append(option);
});

Answer 2

问题是因为在每次迭代中，您都会将新的option元素直接after()插入第一个元素，因此在之前添加的元素前面。

要解决此问题，请在append()本身上调用select：

// dummy AJAX data
var item = {
  "items": [{
    "key": "First",
    "value": 100
  }, {
    "key": "Second",
    "value": 200
  }, {
    "key": "Last",
    "value": 300
  }]
}

// in AJAX callback
$.each(item['items'], function(i, n) {
  var option = '<option value="' + n['value'] + '">' + n['key'] + '</option>';
  $('select').append(option);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option id="show-data" value="" selected disabled>Please select an item</option>
</select>

您还可以通过在单个字符串中创建所有新选项并调用append()一次来提高性能：

var options = '';
$.each(item['items'], function(i, n) {
  options += '<option value="' + n['value'] + '">' + n['key'] + '</option>';
});
$('select').append(options);

Answer 3

你也可以这样做：

$.each(item['items'].reverse(), function(i,n){

解析了json数据排序

3 个答案: