Ajax JSON响应生成动态下拉框时值与文本显示undefined问题求助

你遇到的核心问题是JSON响应结构和代码预期不匹配，导致下拉框的value和text都显示undefined。咱们一步步拆解：

为什么会出现undefined？ #

你的后端返回的JSON是两个平行数组：

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

但你原代码里的$.each(data, function(index, element))是在遍历data的顶层属性（也就是先遍历ID数组，再遍历NAME数组）。此时element是整个数组，而不是包含ID和NAME属性的单个对象，所以element.ID、element.NAME自然找不到对应的属性，返回undefined。

解决方案1：适配当前的JSON结构 #

既然ID和NAME数组长度一致，我们可以通过索引来对应取值，直接修改前端代码即可：

$.ajax({
    url: "//<?echo $_SERVER["SERVER_NAME"];?>/services/project_data.php",
    dataType: "json",
    type: "POST",
    //data: {lan : lan},
    success: function(data){
        const selectBox = document.getElementById("project");
        // 遍历ID数组的索引，同时从两个数组取对应值
        for(let i = 0; i < data.ID.length; i++){
            const option = document.createElement("option");
            option.text = data.NAME[i];
            option.value = data.ID[i];
            selectBox.add(option);
        }
    }
});

或者用jQuery更简洁的写法：

$.ajax({
    url: "//<?echo $_SERVER["SERVER_NAME"];?>/services/project_data.php",
    dataType: "json",
    type: "POST",
    //data: {lan : lan},
    success: function(data){
        const $select = $("#project");
        $.each(data.ID, function(index, id){
            $select.append(`<option value="${id}">${data.NAME[index]}</option>`);
        });
    }
});

解决方案2：修改后端返回规范的对象数组（推荐） #

从API设计的角度，返回对象数组会更直观，也符合常规开发习惯，后续维护更方便。建议后端把JSON改成这种格式：

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

这样你的原代码只需要保持逻辑不变就能正常工作：

$.ajax({
    url: "//<?echo $_SERVER["SERVER_NAME"];?>/services/project_data.php",
    dataType: "json",
    type: "POST",
    //data: {lan : lan},
    success: function(data){
        const selectBox = document.getElementById("project");
        $.each(data, function(index, element){
            const option = document.createElement("option");
            option.text = element.NAME;
            option.value = element.ID;
            selectBox.add(option);
        });
    }
});

内容的提问来源于stack exchange，提问作者Nev