JQuery-Ajax页面加载时LoadState先于LoadCountry执行的问题

你遇到的核心问题其实是AJAX的异步执行特性导致的：

当页面加载时你直接调用LoadCountry(); LoadState();，LoadCountry内部的$.ajax是异步操作——浏览器会立刻发送请求获取国家数据，但不会傻等请求完成，而是直接跳到下一行执行LoadState()。这时候drpCountry还没被AJAX返回的数据填充，自然只能拿到初始的0或null。

而手动切换下拉框时，LoadState()是在国家数据已经完全加载并填充到下拉框后触发的，所以能正常获取选中值；setTimeout能临时解决，是因为它给了AJAX请求足够的时间完成，但这种方式依赖固定延迟，网络慢的时候很容易失效，属于治标不治本的方案。

下面给你两种靠谱的方式，确保LoadState()在LoadCountry()的AJAX请求彻底完成后再执行：

方法1：把LoadState()放在LoadCountry的success回调里 #

这是最直接的修改方式，在国家数据填充到下拉框的逻辑完成后，立刻调用LoadState()：

function LoadCountry() {
    $.ajax({
        type: 'Post',
        url: 'country.aspx/Loadcountry',
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: 'json',
        success: function(data) {
            console.log(data);
            if (data.d.length > 0) {
                $("<%=drpCountry.ClientID%>").empty();
                for (var i = 0; i < data.d.length; i++) {
                    var Value = data.d[i];
                    var Id = Value.split('/')[0];
                    var Name = Value.split('/')[1];
                    $("<%=drpCountry.ClientID%>").append($('<option>', {
                        value: Id,
                        text: Name
                    }));
                }
                // 国家数据填充完成后，马上加载州数据
                LoadState();
            } else {
                $("<%=drpCountry.ClientID%>").empty();
                $("<%=drpCountry.ClientID%>").append($('<option>', {
                    value: "0",
                    text: "--Select--"
                }));
                // 没有国家数据时也调用LoadState（根据业务需求调整）
                LoadState();
            }
        }
    });
}

然后页面初始化时只需要调用LoadCountry()就行：

$(function() {
    LoadCountry();
    $("<%=drpCountry.ClientID%>").change(function() {
        LoadState();
    })
});

方法2：用Promise封装AJAX（适合多下拉框的复杂场景） #

如果你的其他页面有4-5个依赖的下拉框，用Promise可以让异步流程更清晰，避免回调嵌套：

function LoadCountry() {
    return new Promise(function(resolve, reject) {
        $.ajax({
            type: 'Post',
            url: 'country.aspx/Loadcountry',
            contentType: "application/json; charset=utf-8",
            data: "{}",
            dataType: 'json',
            success: function(data) {
                console.log(data);
                if (data.d.length > 0) {
                    $("<%=drpCountry.ClientID%>").empty();
                    for (var i = 0; i < data.d.length; i++) {
                        var Value = data.d[i];
                        var Id = Value.split('/')[0];
                        var Name = Value.split('/')[1];
                        $("<%=drpCountry.ClientID%>").append($('<option>', {
                            value: Id,
                            text: Name
                        }));
                    }
                } else {
                    $("<%=drpCountry.ClientID%>").empty();
                    $("<%=drpCountry.ClientID%>").append($('<option>', {
                        value: "0",
                        text: "--Select--"
                    }));
                }
                resolve(); // 标记国家数据加载完成
            },
            error: function(err) {
                reject(err); // 处理请求失败的情况
            }
        });
    });
}

页面初始化时用链式调用控制顺序：

$(function() {
    LoadCountry().then(function() {
        LoadState();
    }).catch(function(err) {
        console.error('加载国家数据失败:', err);
    });
    
    $("<%=drpCountry.ClientID%>").change(function() {
        LoadState();
    })
});

1. 可以给LoadState()加个参数，直接传入国家ID，避免重复获取DOM值：

   function LoadState(countryId) {
       var CId = countryId || $("#" + '<%=drpCountry.ClientID%>').val();
       // 后续逻辑不变
   }
   

   这样在LoadCountry的success里调用时，能直接传第一个选项的ID：LoadState($("<%=drpCountry.ClientID%>").val());

2. 注意LoadState里的逻辑：现在是先append"--Loading--"再empty，会导致这个选项残留，建议改成先empty再append加载提示。

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