1

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

<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()等待处理程序内部的 ajax 调用change完成：

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

但它不起作用。我的问题是：我怎么能等到 ajax 调用结束，然后设置#second值？

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

谢谢你的时间。

4

3 回答 3

2

您需要像这样从 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/

于 2013-05-29T12:57:21.620 回答
0

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

于 2013-05-29T12:56:23.457 回答
0

.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


    });
});
于 2013-05-29T13:00:38.173 回答