在select中填充表格 [英] Populate table based in select

问题描述

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

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

对此有何想法？

<$ p $ （'''）。$（'''）;
$ .getJSON （/ users / agencies /+ this.value，function（data）{
$ .each（data.json_list，function（i，obj）{
$（'。agencies_table'）。append （'< tr>< td>'+ obj.label +'< / td>< / tr>'）;
}）;
}）;
}） ;

解决方案

您可以查看的一个解决方案是中止先前请致电

  var xhr; $（变换），函数（）{
 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; 
}）; 
}）; 
  

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

解决方案

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

这篇关于在select中填充表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！