如何将API返回的JSON数据动态添加到select下拉列表中

云上老周

2026-10-7

错误原因

$.get() 是异步AJAX请求方法，直接赋值给data变量拿到的不是后端返回的姓名列表，而是jQuery封装的jqXHR请求对象，直接遍历该对象自然无法生成option选项
原代码中遍历数据的逻辑执行时，AJAX请求还未完成，还没有拿到后端返回的实际数据

修正后代码

$(document).ready(function () {
    const $featuresSelect = $('#FeaturesSelect');
    $featuresSelect.empty();
    // 把数据处理逻辑放到$.get的回调函数中，请求成功后才执行
    $.get("你的API接口地址", function (data) {
        $.each(data, function (i, v) {
            $featuresSelect.append('<option value="' + v.id + '">' + v.title + '</option>');
        });
    // 明确指定响应数据类型为JSON，避免解析异常
    }, 'json');
});

可选优化写法（支持异常捕获）

如果你的项目使用的jQuery版本支持Promise，也可以用async/await写法更易读：

$(document).ready(async function () {
    const $featuresSelect = $('#FeaturesSelect');
    $featuresSelect.empty();
    try {
        const data = await $.get("你的API接口地址");
        $.each(data, function (i, v) {
            $featuresSelect.append(`<option value="${v.id}">${v.title}</option>`);
        });
    } catch (err) {
        console.error('姓名列表接口请求失败：', err);
    }
});