我有一个国家下拉菜单，使用jquery ajax调用填充国家名称。问题在于我需要在确定选择哪个国家之前知道调用何时完成。也就是说，在带有ajax调用的函数之后调用的任何函数都太早了（在下拉列表填充之前），因此以下函数将会崩溃。
我不想使用async=false (因为这会引起更多问题，并且是一种不好的做法)。
那么，实现这一点的正确方法是什么？
这里有一个通用的ajax函数来检索数据并用参数id填充指定类型的select下拉菜单(ddl)：
我有一个测试按钮，执行此操作并想要获取所选选项的值（这将调用填充状态，获取第一个选定状态的值，并再次调用以填充城市）。问题非常明显：在不知道前一个下拉列表的选择值的情况下，我无法说填充下一个下拉列表（因此我必须有一种方法来等待下拉列表首先填充）。
点击按钮后，您立即看到一个弹出的警告框（cid值为空），并且只有在您从警告对话框中单击[确定]按钮后才填充国家下拉列表。基本上这是错乱的顺序。
如果我将async:false添加到ajax例程中，则会显示具有正确cid值的警报，但是由于人们已经发布了不要使用async:false的帖子，因此我希望避免使用它，但不确定如何正确进行操作。 （如果有人想知道，我正在从旧的dotnet webforms网站中删除所有MSAjaxToolkit垃圾，并替换为更快，更小，更容易修复的jQuery ajax。）
以下是HTML片段：
这里有一个通用的ajax函数来检索数据并用参数id填充指定类型的select下拉菜单(ddl)：
function RetrieveDD(ddl, ddtype, id) {
var servicename;
switch (ddtype) {
case 'country':
servicename = "LoadCountries";
break;
case 'state':
servicename = "LoadStateProvinces";
break;
case 'city':
servicename = "LoadCityLocalities";
break;
default:
servicename = "";
}
if (servicename != "") {
$.ajax({
url: 'DDService.asmx/' + servicename,
dataType: 'json',
method: 'post',
data: { ID: id },
success: function (data) {
ddl.empty();
$.each(data, function (index) {
ddl.append($("<option" + (index == 0 ? " selected" : "") + "></option>").val(this['V']).html(this['T']));
});
},
error: function (err) {
console.log('Error (RetrieveDD): ' + JSON.stringify(err, null, 2));
}
});
};
};
我有一个测试按钮，执行此操作并想要获取所选选项的值（这将调用填充状态，获取第一个选定状态的值，并再次调用以填充城市）。问题非常明显：在不知道前一个下拉列表的选择值的情况下，我无法说填充下一个下拉列表（因此我必须有一种方法来等待下拉列表首先填充）。
$('#btnTest').click(function () {
RetrieveDD($("#ddlCountries"), "country", 0);
var cid = $("#ddlCountries").val(); //this is still undefined because ajax call above not completed
alert("cid = " + cid); //normally another call would be made here to populate the states
});
点击按钮后，您立即看到一个弹出的警告框（cid值为空），并且只有在您从警告对话框中单击[确定]按钮后才填充国家下拉列表。基本上这是错乱的顺序。
如果我将async:false添加到ajax例程中，则会显示具有正确cid值的警报，但是由于人们已经发布了不要使用async:false的帖子，因此我希望避免使用它，但不确定如何正确进行操作。 （如果有人想知道，我正在从旧的dotnet webforms网站中删除所有MSAjaxToolkit垃圾，并替换为更快，更小，更容易修复的jQuery ajax。）
以下是HTML片段：
<input type="button" id="btnTest" value="Test" /><br />
<div id="dd">
<select id="ddlCountries"></select><br />
<select id="ddlStates"></select><br />
<select id="ddlCities"></select>
</div>
**************回应为什么我认为这不是重复的********* 需要添加对较旧版本的IE支持 (Windows 7、8、8.1以及某些服务器版本)。IE不支持箭头函数或Promise（或2015年后的大多数ECMA方法），因此很多推荐的答案虽然非常好，但没有包含这些内容的代码。我会尝试找出解决方案并在此处发布。
var cid = $("#ddlCountries").val();放到成功处理程序本身中，或者将一个回调传递到RetrieveDD中来运行它（或以类似的方式使用 promises）。 - Gavin