Question

我得到预定义的值，我必须插入两个选择：

<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>'
            );
        });
    });

问题是，我可以在加载 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值？

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

感谢您的时间。

Answer 1

你需要像这样设置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/

Answer 2

也许我错过了你的一些工作流程要求，但是你不能在附加选项后设置#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...');
        });

更新了小提琴：http://jsfiddle.net/W2nVd/1/

Answer 3

.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').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


    });
});

Jquery承诺等到ajax结束

3 个答案: