javascript - 根据选择填充表

Question

我正在使用此代码根据所选的选择选项填充表格。如果用户单击选择，此代码可以正常工作，但如果用户使用箭头键则不会。

在这种情况下，表不会被清理，而来自 json 的数据会按顺序填充。因此，表中的输出将与当前选择的选项不匹配。

对此有什么想法吗？

$('select').on('change', function() {
    $('.agencies_table').html('');
    $.getJSON("/users/agencies/" + this.value, function(data) {
        $.each(data.json_list, function(i, obj) {
            $('.agencies_table').append('<tr> <td>' + obj.label + '</td> </tr>');
        });
    });
});

Answer 1

您可以考虑的一种解决方案是中止之前的调用

var xhr;
$('select').on('change', function () {
    if (xhr) {
        xhr.abort();
    }
    $('.agencies_table').html('');
    xhr = $.getJSON("/users/agencies/" + this.value, function (data) {
        $.each(data.json_list, function (i, obj) {
            $('.agencies_table').append('<tr> <td>' + obj.label + '</td> </tr>');
        });
    }).always(function () {
        xhr = undefined;
    });
});