jquery - Jquery変更イベントが選択オプションを期待どおりに変更しない

Question

質問の前の簡単な概要: 私は<select>s のセットを持っています。そのうちの 1 つは、最初の値に基づいて AJAX を介して条件付きで入力されます。魔法のようなものは何もありません。私の問題は、最初の値と2番目の値をプログラムで設定しようとすると、2番目がデフォルトの 0 indexed にリセットされることです<option>。ブラウザーでブレークポイントを使用して実行されるコードを観察することで、選択した値がリセットされていることがわかります。

編集:手動でトリガーされたイベントは、含まれている関数が終了するまで実際にはトリガーされないことがわかりました。これが、値がリセットされていると信じていた理由ですが、実際にはオプションが再設定されていました。

HTML:

<div class="row offset3">

    <select id="select-a" name="select-a">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>

    <select id="select-b" name="select-b">

        <!-- AJAX Call fills this in -->

    </select>

    <button class="btn btn-primary" id="change">Change!</button>
</div>

javascript の簡単な要約: select-a の値に基づいて、AJAX を介して select-b のオプションを取得する変更リスナーを select-a に追加し、ページの読み込み時にこの関数を呼び出して、最初に選択内容を設定します。これはすべて機能しており、スペースと時間を節約するために AJAX 呼び出しが最小化されています。

JavaScript:

function set_b ( data, edit ){
    var options = "";

    for (var a in data){
        options += '<option value="' + $.trim ( data[a] ) + '">' + $.trim ( data[a] ) + '</option>';
    }

    options += '<option value="Custom">Custom</option>';

    $('#select-b').html(options);

    //Moving the below line from outside of the change handler function seems to remedy the issue for now
    $('#select-b').focus().val(edit);
}

function get_b( edit ){

    var set = { "csrf_test_name" : csrf, "a_type" : a_type, "s_type" : s_type, "g" : g, "is_ajax" : "1" };

    $.ajax({
        type: "POST",
        url: url,
        data: set,
        dataType: "json",
        success: function( data ){
                     set_b ( data, edit );
        },
        error: function (xhr, ajaxOptions, thrownError){
            console.log (ajaxOptions);
        }

});


}


$(document).ready( function(){

    $(document).on( "click", '#change', function(){

        var edit = "Fourty";
        $('#select-a').focus().val('4').trigger("change", edit);

    });

    $(document).on( "change", '#select-a',  function( e, edit ){

        get_b( edit );

    });


    get_b();


});

これは機能していますが、これは正しい方法でも最善の方法でもないように感じます。だから私の最初の質問は、同じ結果を達成するための、よりクリーンで結合の少ない方法に関する推奨事項はありますか? 第二に、私が期待するのは、含まれる関数が終了した後ではなく、呼び出された直後に変更リスナーが起動することです。これは正常な動作ですか? また、JQuery でこれに似た現象が他に何か注意する必要がありますか? 建設的な意見は大歓迎です。