Estou recebendo valores predefinidos, que eu tenho que inserir em duas seleções:

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

Opções dentro#second depende do valor selecionado em#first. Essas opções são carregadas via 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>'
            );
        });
    });

O problema é que eu posso definir o valor de#second depois de os dados do ajax serão carregados. Então, seguir o código obviamente não funcionará:

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

Então eu tentei usar.promise() esperar até chamar ajax dentrochange o manipulador será concluído:

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

Mas isso não funciona. Minha pergunta é: como eu posso esperar para finalizar a chamada do ajax, e então definir#second valor?

Aqui você tem violino para este problema:http://jsfiddle.net/W2nVd/

Obrigado pelo seu tempo.