Question

在我的问题之前快速概述：我有一组<select> s，其中一个是基于第一个值通过AJAX有条件填充的。没有什么神奇的。我的问题是，当我尝试以编程方式设置第一个AND值和第二个值时，第二个将重置为默认的0索引<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的快速摘要：添加一个更改侦听器以选择-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中我还应该注意哪些与此类似的事情？非常感谢任何建设性的意见。

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

0 个答案: