为什么第二个Ajax设置DivisionCode选中值的操作无效?
问题解决:异步请求竞态导致DivisionCode选中失效
你的判断完全正确,问题出在异步请求的竞态条件上:
$.getJSON('@Url.Action("BusinessAreaDivisions")') 是异步执行的,你当前设置DivisionCode选中值的代码写在这个请求的回调函数外面,会在下拉框选项还没填充完成时就执行——这时候对应value的option还不存在,自然无法选中。
修复方案
把设置DivisionCode选中值的逻辑,移到BusinessAreaDivisions请求的回调函数内部,确保等下拉框选项全部生成后再执行选中操作。同时推荐用jQuery的val()方法直接设置下拉框值,比手动查找option并设置attr更简洁可靠。
修改后的完整代码:
$('#Job').change(function () { var selectedValue = this.value; if (selectedValue != null && selectedValue != '') { $.getJSON('@Url.Action("GetJobInfo")', { jobId: selectedValue }, function (info) { console.log(info.BusinessAreaCode); $('#BusinessAreaCode').val(info.BusinessAreaCode); // 用val()简化设置逻辑 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" })); } else { $.each(divList, function (XYZ, data) { ddldivision.append($('<option/>', { value: data.Value, text: data.Text })); }); } // 移到此处:等选项填充完成后再设置选中值 console.log(`'${info.DivisionCode}'`); ddldivision.val(info.DivisionCode); }); } else { // 处理myValue为空的场景,确保选中逻辑不遗漏 ddldivision.val(info.DivisionCode); } }); } });
关键修改点:
- 将设置DivisionCode选中的代码从外层移到
BusinessAreaDivisions请求的回调内部,确保DOM元素已准备好 - 用
ddldivision.val(info.DivisionCode)替代手动查找option的方式,逻辑更稳定 - 补充
myValue为空时的选中逻辑,覆盖全场景
内容的提问来源于stack exchange,提问作者Randy
相关产品推荐
相关产品推荐

