Jquery更改事件未按预期更改选择选项

在我提出问题之前，请快速浏览一下： 我有一组s，其中一个是基于第一个值通过AJAX有条件地填充的。没什么神奇的。我的问题是，当我尝试以编程方式设置第一个值和第二个值时，第二个值被重置为默认的0索引。通过观察在浏览器中使用断点运行的代码，我知道正在重置选定的值

编辑：我发现手动触发的事件直到包含函数完成后才真正触发。这就是为什么我认为该值正在重置，但实际上选项正在重新填充

HTML:

javascript的快速总结：向select-A添加一个更改侦听器，该侦听器将根据select-A的值，通过AJAX获得select-b的选项，然后在页面加载时调用此函数以最初填充select。这一切都正常工作，为了节省空间和时间，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();


});

尽管这样做很有效，但我觉得这不是正确或最好的方法。所以我的第一个问题是：有没有建议使用更干净、耦合更少的方法来实现相同的结果？ 第二： 我希望ChangeListener在被调用后立即启动，而不是在包含函数完成后启动。这是正常的行为吗？在JQuery中是否还有类似的情况需要注意？

---

非常感谢任何有建设性的意见。

将返回哪些选项？我看到select-a的值是1-6，但是在代码调用中，当您单击change时，您传递的是值Fourty。在AJAX加载选项中，Fourty是有效值吗？我已经更改了选项和AJAX调用，以缩短示例并使其可读。因此，这些领域基本上是不相关的，但是，是的，返回的可用选项包括Fourty，在所有拼写错误的荣耀中，例如这个例子。

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();


});