Jquery 承诺等待 ajax 结束

我正在获取预定义值，我必须将其插入到两个选择中：

<div id="wrapper">
    <select id="first">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select id="second"></select>
</div>

里面的选项#second取决于所选值#first。该选项通过 ajax 加载：

$('#first').change( function() {
        $.ajax({
            url: "giveMeValues.phpOrWhatever"
        }).done(function() {
            // just simulating data from ajax call
            $('#second').append(
                '<option value="a">a</option>'+
                '<option value="b">b</option>'+
                '<option value="c">c</option>'
            );
        });
    });

问题是，我可以设置值#second afterajax数据将被加载。所以下面的代码当然是行不通的：

$('#first').val('2').change();
$('#second').val('b').change();

所以我尝试使用.promise()等到ajax调用里面change处理程序将完成：

$('#first').val('2').change();
    $('#wrapper').promise().then( function() {
        $('#second').val('b');
        console.log('setting value...');
    });

但这不起作用。我的问题是：我如何等待ajax调用结束，然后设置#second value?

在这里你可以解决这个问题：http://jsfiddle.net/W2nVd/

谢谢你的时间。

您需要像这样设置 ajax 的承诺：

(function($) {
    // Our Ajax promise variable
    var promise;

    $('#first').change( function() {
        // Set the ajax promise variable
        promise = $.ajax({
            url: "#"
        }).done(function() {
            $('#second').append(
                '<option value="a">a</option>'+
                '<option value="b">b</option>'+
                '<option value="c">c</option>'
            );
            console.log('appending new content...');
        });
    });

    $('#first').val('2').change();
    // the var `promise` was set on the line above when it executed 
    // the `change()` callback
    promise.promise().done( function() {
        $('#second').val('b');
        console.log('setting value...');
    });

})(jQuery);

JSFiddle：http://jsfiddle.net/W2nVd/2/