jQuery $.each遍历JSON仅返回索引 联动下拉框无法获取真实ID如何修复

问题原因 #

你代码里有两个需要调整的点：

1. 你在AJAX配置里已经指定了dataType: "json"，jQuery会自动将接口返回的JSON字符串解析为JS对象，不需要手动调用JSON.parse(data)二次解析
2. 你遍历数组时用的key是数组的下标索引（也就是你看到的0、1、2...），州/省的ID存在每一项的对象里，也就是遍历的第二个参数value的id属性，你之前写key.id当然拿不到值，因为key是数字类型没有id属性。

修正后的代码 #

只需要修改success回调里的遍历逻辑即可：

$(document).ready(function() {
    $('select[name="country"]').on('change',function(){
        var country_id= $(this).val();
        if (country_id) {
            $.ajax({
                url: "/world/getStates.php",
                type: "GET",
                data: {'country_id':country_id},
                dataType: "json",
                success: function(data){
                    console.log(data);
                    $('select[name="state"]').empty();
                    // 去掉多余的JSON.parse，直接用item.id取州省ID
                    $.each(data, function(index, item){
                        $('select[name="state"]').append('<option value="'+ item.id +'">'+ item.name +'</option>');
                    });
                }
            });
        }else {
            $('select[name="state"]').empty();
        }
    });
});

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