Dostaję predefiniowane wartości, które muszę wstawić do dwóch selekcji:

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

Opcje w środku#second zależy od wybranej wartości w#first. Te opcje są ładowane za pośrednictwem 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>'
            );
        });
    });

Problem polega na tym, że mogę ustawić wartość#second po ładowane będą dane ajaxowe. Tak więc poniższy kod oczywiście nie zadziała:

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

Więc spróbowałem użyć.promise() czekać do wywołania ajax wewnątrzchange obsługa zostanie zakończona:

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

Ale to nie działa. Moje pytanie brzmi: jak mogę czekać do końca wywołania ajax, a następnie ustawić#second wartość?

Tutaj masz ochotę na ten problem:http://jsfiddle.net/W2nVd/

Dziękuję za Twój czas.