0

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

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

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

1 回答 1

0

您应该将触发移至$.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");
     });

 });
于 2012-10-09T21:24:59.483 回答