Question

我有像

这样的Ajax JSON响应数据

{"ID":["53","54"],"NAME":["Volkswagen Project ","Nevpro Project"]}

现在我想要动态下拉列表，ID为值，NAME为文本。我的Ajax代码 -

$.ajax({

url: "//<?echo $_SERVER["SERVER_NAME"];?>/services/project_data.php",
    dataType: "json",
    type: "POST",
    //data: {lan : lan},
    success: function(data){

        $.each(data,function(index, element) {
                               var x = document.getElementById("project");
                               var option = document.createElement("option");
                               option.text = element.NAME;
                               option.value = element.ID;
                               x.add(option);
                    });
    }
});

通过此代码下拉列表，但值和文本显示未定义。请有人帮我解决这个问题。

Answer 1

您的代码存在的问题是data是一个对象。这些数组属于ID和NAME属性，因此您需要遍历这些属性，如下所示：

var data = {
  "ID": ["53", "54"],
  "NAME": ["Volkswagen Project ", "Nevpro Project"]
}

// in your success handler:
var html = data.ID.map(function(id, i) {
  return `<option value="${id}">${data.NAME[i]}</option>`;
});
$('#x').append(html.join(''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="x"></select>

请注意，我使用模板文字只是为了保持代码整洁。如果需要支持旧浏览器，可以将其更改为使用字符串连接。

Answer 2

您的数据格式应如下所示，以便您的UI代码能够正常工作：

[ {"ID":"53","NAME":"Volkswagen Project"},
  {"ID":"54", "NAME": "Nevpro Project"} ]

即。应该有一个包含两个对象的数组。每个对象都有NAME和ID属性。

Ajax JSON数据响应动态下拉

2 个答案: