Ajax 数组结果作为 Select 选项 - 未定义答案

【问题标题】：Ajax array result as Select option - undefinedAjax 数组结果作为 Select 选项 - 未定义
【发布时间】：2021-11-18 14:09:16
【问题描述】：

我是 AJAX/JSON 的新手，正在努力将 AJAX 数组响应解析为 <select> 下拉列表。

我的结果看起来不错，但是即使我在网上研究了很多教程并尝试了各种返回结果的方法，但每一个结果都会导致下拉菜单 options 显示为 undefined。

AJAX 结果

[{"property_code":"AGGCO","name":"Office Name"}]

注意：数组中可能有多达 100 个条目。

jQuery

$('#unit').on('change', function() {
    var unitID = $(this).val();
    if (unitID) {
        $.ajax({
            type: 'POST',
            url: '../../controllers/admin_addNewUser_units_offices.php',
            data: 'action=unit_office_dropdown&unit_id=' + unitID,
            success: function(response) {
                console.log(response);
                var len = response.length;

                $("#office").empty();
                for (var i = 0; i < len; i++) {
                    var code = response[i]['property_code'];
                    var name = response[i]['name'];

                    $("#office").append("<option value='" + code + "'>" + name + "</option>");

                }
            }
        });
    } else {
        $('#office').html('<option value="">Select Business Unit first</option>');
    }
});

有人能解释一下我做错了什么吗？谢谢

【问题讨论】：

那么当它不起作用时会发生什么？您是否添加了 console.log 行来验证响应是您认为的内容？
@SebastianSimon 完全取决于内容类型。
@Armitage2k 看起来像一个字符串。比较 string 和 actual array。（我之前的评论是断言你应该验证自己；应该更清楚......）
stackoverflow.com/questions/4064444/… 可能是真正的答案
@epascarello bingo，刚刚添加了header('Content-type: application/json');，然后通过json_encode 返回结果，它可以工作。非常感谢您指出主要问题。

标签： javascript jquery ajax

【解决方案1】：

您的代码看起来很合理 - 假设您解析 JSON

可以简化

注意：如果您想要“请选择”，您可以使用.html()，它也会清空选择 - 如果您不清空，那么下次您将在之前的选项中添加新选项

const response = `[{ "property_code": "AGGCO", "name": "Office Name"}]`; // for testing
const opts = JSON.parse(response); // not needed if you deliver application/json

$("#office")
  .html(new Option("Please select", ""))
  .append(opts
    .map(({ property_code, name }) => new Option(name, property_code)))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="office"></select>

【讨论】：

更好：$("#office").append(opts.map(({ property_code, name }) => new Option(name, property_code))).
是的，这行得通。欣赏答案！
@SebastianSimon 确实，更短且没有连接 - 但是我们确实需要清空它
如果可行，那么您的原始代码也可以使用，如答案中所述，这只是提供了更短/更少的代码版本。 ...除非您的 response 不是数组而是字符串，在这种情况下，JSON.parse 是解决方法。
如果您想要“请选择，您可以使用 .html 来清空选择 - 如果您不清空，那么下次您将在之前的选项中添加新选项跨度>