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 に答える