AJAX数组解析为select下拉选项后option显示undefined问题求助

核心错误原因 #

你的AJAX请求默认拿到的是字符串格式的JSON响应，没有被解析为JavaScript对象数组，直接对字符串取下标属性自然会得到undefined。

修复方案（任选其一即可，优先选方案1） #

• 方案1：在AJAX配置中指定dataType: 'json'，让jQuery自动解析响应为JSON对象
  修改后的完整代码如下：

$('#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,
            // 新增这一行指定响应类型为JSON
            dataType: 'json',
            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'];
                    // 这里推荐用jQuery方法生成option，避免特殊字符导致的语法问题
                    $("#office").append($('<option>').val(code).text(name));
                }
            },
            // 可选：添加错误回调方便排查问题
            error: function() {
                $('#office').html('<option value="">加载办公点失败，请重试</option>');
            }
        });
    } else {
        $('#office').html('<option value="">Select Business Unit first</option>');
    }
});

• 方案2：手动解析响应字符串为JSON对象
  如果不方便修改AJAX配置，也可以在success回调第一行手动解析：

success: function(response) {
    // 新增这一行手动解析JSON
    response = JSON.parse(response);
    console.log(response);
    // 后续原有逻辑保持不变即可
}

可选优化建议 #

后端返回响应时，添加Content-Type: application/json的响应头，能进一步避免不同浏览器的解析兼容问题。

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