Question

当我发出警报消息时，我已成功地使用以下代码获取所有必要组件以触发级联下拉列表中的更新。

但是，当我注释掉警报时，事情似乎移动得太快了。有没有办法确保我的源下拉列表在我的目标下拉列表中触发更改之前已完成更新？

$(document).ready(function() {
     //Default bu (company) listing
     $.post("select_bu.php", {
         id: 1
     }, function(data) {
         $("select#id_buid").html(data);
     });
     //Default division listing
     $.post("select_division.php", {
         id: 1
     }, function(data) {
         $("select#id_divid").html(data);
     });
     //Default department listing
     $.post("select_dept.php", {
         divid: 11
     }, function(data) {
         $("select#id_deptid").html(data);
     });
     //Default title listing
     $.post("select_title.php", {
         deptid: 12
     }, function(data) {
         $("select#id_titleid").html(data);
     });
     //Default location listing
     $.post("select_loc.php", {
         id: 1
     }, function(data) {
         $("select#id_locid").html(data);
     });
     //Change to Business Unit triggers updated division listing and location
     $("select#id_buid").change(function() { * //alert("Change of BU triggering change in Division and Location.");*
         var id = $("select#id_buid option:selected").attr('value');
         $.post("select_division.php", {
             id: id
         }, function(data) {
             $("select#id_divid").html(data);
         });
         $.post("select_loc.php", {
             id: id
         }, function(data) {
             $("select#id_locid").html(data);
         });
         $("#id_divid").trigger("change");
     });
     //Change to Division triggers updated department listing
     $("select#id_divid").change(function() {
         //alert("Change of Division triggering change in Department.");
         var id = $("select#id_divid option:selected").attr('value');
         $.post("select_dept.php", {
             divid: id
         }, function(data) {
             $("select#id_deptid").html(data);
         });
         $("#id_deptid").trigger("change");
     });
     //Change to Department triggers updated title listing
     $("select#id_deptid").change(function() {
         //alert("Change of Department triggering change in Title.");
         var id = $("select#id_deptid option:selected").attr('value');
         $.post("select_title.php", {
             deptid: id
         }, function(data) {
             $("select#id_titleid").html(data);
         });
     });
 });

Answer 1

您应该将触发移至$.post的成功功能。 Ajax调用是异步完成的，这意味着在创建请求脚本后，移动到下一个命令，并在后台处理ajax请求。如果您希望它们一个接一个地出现，则必须在前一个响应处理程序中调用next。所以看起来像这样：

$("select#id_buid").change(function() { * //alert("Change of BU triggering change in Division and Location.");*
     var id = $("select#id_buid option:selected").attr('value');
     $.post("select_division.php", {
         id: id
     }, function(data) {
         $("select#id_divid").html(data);
         $.post("select_loc.php", {
             id: id
         }, function(data) {
             $("select#id_locid").html(data);
             $("#id_divid").trigger("change");
         });
     });
 });

 $("select#id_divid").change(function() {
     //alert("Change of Division triggering change in Department.");
     var id = $("select#id_divid option:selected").attr('value');
     $.post("select_dept.php", {
         divid: id
     }, function(data) {
         $("select#id_deptid").html(data);
         $("#id_deptid").trigger("change");
     });

 });

使用jquery触发器的级联下拉过快

1 个答案: