Javascript 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>

问题是，我可以在加载ajax数据后设置

#second

的值。因此，以下代码当然不起作用：

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

因此，我尝试使用

.promise（）

等待，直到

change

处理程序内的ajax调用完成：

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

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

#second

值

在这里，你有小提琴为这个问题：

---

谢谢您的时间。

也许我遗漏了您的一些工作流要求，但您不能在附加选项后设置#秒的值吗

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

$.ajax({
网址：“#”
}).done（函数（）{
$（'#second'）.empty（）.append(
“a”+
“b”+
“c”
);
$（#second'）.val（'b'）；
log（'appending new content…'）；
});

---

更新的fiddle:

您需要设置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);

（函数（$）{
//我们的Ajax承诺变量
var承诺；
$（'#first'）。更改（函数（）{
//设置ajax promise变量
promise=$.ajax({
网址：“#”
}).done（函数（）{
$（“#秒”）。追加(
“a”+
“b”+
“c”
);
log（'appending new content…'）；
});
});
$（'#first'）.val（'2'）.change（）；
//var`promise`在执行时设置在上面一行
//`change（）`回调
promise.promise（）.done（函数（））{
$（#second'）.val（'b'）；
log（'设置值…'）；
});
})（jQuery）；

jsiddle:

.done（）正是您要搜索的内容，只需将其放入..像这样

试试看

$('#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" selected="selected">b</option>'+
            '<option value="c">c</option>'
        );
    });
});

$（'#first'）。更改（函数（）{
$.ajax({
url:“giveMeValues.phpOrWhatever”
}).done（函数（）{
//只是模拟来自ajax调用的数据
$（“#秒”）。追加(
“a”+
“b”+
“c”
);
});
});

。。。。或者

$('#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').val('b'); // change value after options are available


    });
});

$（'#first'）。更改（函数（）{
$.ajax({
url:“giveMeValues.phpOrWhatever”
}).done（函数（）{
//只是模拟来自ajax调用的数据
$（“#秒”）。追加(
“a”+
“b”+
“c”
);
$（'#second'）.val（'b'）；//在选项可用后更改值
});
});

我也在考虑，但问题是，此更改只应设置一次。对于您的代码，在更改

#后的所有情况下，第一次

#第二次

将设置为

'b'

。我也在考虑这一点，但问题是，此更改只应设置一次。使用您的代码，所有更改后的#first#second都将设置为“b”ok。。？但它也会执行Ajax调用，每次都会追加3个选项……那么，您是否希望每次更改时都这样做？或者整个函数应该只执行一次？正如我的评论所指出的那样，这只是一种简化：

//只是模拟来自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').val('b'); // change value after options are available


    });
});