Я получаю предопределенные значения, которые я должен вставить в два выбора:

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

Проблема в том, что я могу установить значение#second после Данные ajax будут загружены. Поэтому следующий код, конечно, не будет работать:

$('#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/

Спасибо за ваше время.