0

我的问题之前的快速概述：我有一组<select>s，其中一个是根据第一个的值通过 AJAX 有条件地填充的。没什么神奇的。我的问题是，当我尝试以编程方式设置第一个值和第二个值时，第二个被重置为默认的 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-a 的值获取 select-b 的选项，然后在页面加载时调用此函数以最初填充选择。这一切正常，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 中是否还有其他类似的情况需要注意？非常感谢任何建设性的意见。

4

0 回答 0