Ajax请求获取数据库国家列表后，如何追加数据到下拉选项？

看你已经通过PHP成功返回了JSON格式的国家列表，接下来只需要完善Ajax的success回调逻辑，把数据转成<option>元素加到你的下拉框里就行。我给你补全并优化后的代码：

// 监听国家下拉框的focus事件
$("#country").focus(function() {
    // 加个判断，避免用户多次点击focus重复请求数据
    if ($("#country option").length <= 1) { // 假设默认只有一个提示选项，比如"请选择国家"
        $.ajax({
            url: 'country.php',
            dataType: 'json',
            type: 'GET', // 你的PHP用GET请求的话可以明确指定，默认也是GET
            success: function(res) {
                // 从返回的JSON里取出国家数组
                const countryList = res.response;
                // 遍历每个国家，创建option元素
                countryList.forEach(countryName => {
                    // 创建option，把国家名同时设为value和显示文本（如果需要ID可以改PHP返回对应字段）
                    const optionItem = $('<option>').val(countryName).text(countryName);
                    // 把option追加到下拉框里
                    $("#country").append(optionItem);
                });
            },
            error: function(xhr, errStatus, errMsg) {
                // 请求失败时的调试提示，方便排查问题
                console.error('加载国家列表出错啦:', errMsg);
            }
        });
    }
});

几个关键细节说明： #

• 加了if ($("#country option").length <= 1)的判断：防止用户多次点击下拉框触发重复请求，避免下拉框里出现重复的国家选项。
• 如果你不想等到用户点击下拉框才加载数据，也可以把Ajax请求放到页面加载完成的事件里，这样打开页面就自动加载：

$(document).ready(function() {
    $.ajax({
        url: 'country.php',
        dataType: 'json',
        success: function(res) {
            const $select = $("#country");
            res.response.forEach(country => {
                $select.append($('<option>').val(country).text(country));
            });
        },
        error: function(xhr, errStatus, errMsg) {
            console.error('加载国家列表失败:', errMsg);
        }
    });
});

• 如果你的国家数据有对应的ID（比如数据库里的country_id），可以修改PHP代码返回包含ID和名称的数组，然后在创建option时把val设为ID，text设为国家名，这样提交表单时更方便处理。

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