如何在没有 setTimeout 的情况下加载值？

Question

看下面的例子：

<select id="connection" onchange="load_databases_of_this_connection();"></select>
<select id="database" onchange="load_tables_of_this_database();"></select>
<select id="table" onchange="load_columns_of_this_table();"></select>
<input id="fieldcode" type="text"/>
<input id="fieldcolor" type="text"/>
<script type="text/javascript" language="javascript">

$('#connection').change();

setTimeout("x()",2000 ); // select database and load tables

function x() {
        $('#database').val( 'main_database' );
 $('#database').change();
 setTimeout("t()",2000 );   //  select table and load columns
}


function t() {
 $('#table').val( 'payments' );    
 $('#table').change();
 setTimeout("a()",2000 ); // select columns
}

function a() {
 $('#fieldcode').val( 'code' );
 $('#fieldcolor').val( 'status' );
}

</script>

这段代码可以工作，但我不喜欢它。我想要做的是随后加载值，当“更改事件”结束（成功或完成）时，然后调用下一个，例如，如果我在没有 setTimeout 的情况下执行以下示例，则这不起作用：

    <script type="text/javascript" language="javascript">
    $('#connection').change();
    $('#database').val( 'main_database' );
    $('#database').change();
    $('#table').val( 'payments' );

    $('#table').change();

    $('#fieldcode').val( 'code' );
    $('#fieldcolor').val( 'status' );
    </script>

I'm trying to do it with ajaxComplete but I get an infinite cycle, dure to each ajax call ends the ajaxComplete is called ... :

$('#database').ajaxComplete( function (e) { 
    $('#table').val( 'payments' );    
    $('#table').change();   
} );

请帮忙！

Answer 1

我很容易解决...

$.ajax( {complete:function() {

    $('#database').val('main_database');

    $.ajax( {complete:function() {

        $('#table').val('payments');   

            $.ajax( {complete:function() { 

                $('#fieldcode').val( 'code' );
                $('#fieldcolor').val( 'status' );
            }});
    }});
}});

Answer 2

我假设您的代码比您看到的要多，如果是这样，这应该可以解决问题：

$('#connection').change(function(){
    $('#database').val('main_database');
}); 
$('#database').change(function(){
    $('#table').val('payments');    
}); 
$('#table').change(function(){
    $('#fieldcode').val( 'code' );
    $('#fieldcolor').val( 'status' );
});