使用jquery觸發器級聯下拉過快

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請求在後臺處理。如果你希望它們一個接一個出現，你必須在前一個響應處理程序中調用下一個。所以它可以看起來像這樣：

$("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"); 
    }); 

});