1

事前定義された値を取得しています。これを 2 つの選択に挿入する必要があります。

<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 から promise を設定する必要があります。

(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 に答える