Populate table based in select

Question

I am using this code to populate a table based in the select option chosen. This code works fine if the user click in the select, but not if the user uses the arrow keys.

In that case the table is not cleaned, and the data from json is populated sequentially. So, the output in table will not match the current selected option.

Any idea about this?

$('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

One solution you can look at is to abort the previous call

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