为什么我的第二个Ajax更改所选值不起作用

Question

当#Job的Dropdown更改时，我有一个JS函数被激发。假设会发生三件事。

• 首先，BusinessAreaCode选择适当的项目。这是正在工作
• 其次，我获取Division List来填充DivisionCode下拉。这同样有效
• 最后，我设置了适当的DivisionCode，就像我为BusinessAreaCode所做的那样。然而，这并不奏效

$('#Job').change(function () {
var selectedValue = this.value;
if (selectedValue != null && selectedValue != '') {
$.getJSON('@Url.Action("GetJobInfo")', { jobId: selectedValue }, function (info) {
console.log(info.BusinessAreaCode);
$('#BusinessAreaCode option[value="' + info.BusinessAreaCode + '"]').attr("selected", "selected");
var ddldivision = $('#DivisionCode');
ddldivision.empty();
ddldivision.append($('<option/>', {
value: "",
text: "-- Select --"
}));
var myValue = $('#BusinessAreaCode').val();
console.log(myValue)
if (myValue != null && myValue != '') {
$.getJSON('@Url.Action("BusinessAreaDivisions")', { businessArea: myValue }, function (divList) {
if (divList.length == 0) {
ddldivision.empty();
ddldivision.append($('<option/>', {
value: "",
text: "N/A"
}));
}
$.each(divList, function (XYZ, data) {
ddldivision.append($('<option/>', {
value: data.Value,
text: data.Text
}));
});
});
}
console.log(`'${info.DivisionCode}'`);
$('#DivisionCode option[value="' + info.DivisionCode + '"]').attr("selected", "selected");
});
}
});

控制台日志中没有错误。我确信我正在返回一个正确的DivisionCode值。这可能是比赛条件吗？任何帮助都将不胜感激。

Answer 1

您试图在填充列表之前选择该选项。这里的操作顺序是：

1. 调用getJSON以获取"；"除法">
2. 设置所选的"；"除法">
3. 当getJSON完成时；"除法"；选项并重新填充列表

因此，一旦列表被清除并重新填充，所做的任何选择，如果有匹配的选项，都会被删除。

移动此行：

$('#DivisionCode option[value="' + info.DivisionCode + '"]').attr("selected", "selected");

因此，它发生在之后，列表在异步操作中填充：

$.getJSON('@Url.Action("BusinessAreaDivisions")', { businessArea: myValue }, function (divList) {
// your code, then...
$('#DivisionCode option[value="' + info.DivisionCode + '"]').attr("selected", "selected");
});