根据选择填充表格

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

- user455318

---

你能展示一下HTML吗？我有点困惑为什么要使用.html('')然后再用.append()。如果你只是在添加行，那其他的表格标签在哪里呢？ - Lelio Faieta

也许这个表格的名称是 agencies_table。 - bpavlov

@LelioFaieta $('.agencies_table').html(''); 可以写成 $('.agencies_table').empty();。 - mplungjan

@mplungjan 是的，我知道。问题是：OP是否有一个结构，其中只有表格行（那些包含在<tbody>标记内的行）在该div中？ - Lelio Faieta

我不明白你所说的“在那个div里”的意思，agenices_table很可能是一个表格或tbody。 - mplungjan

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

- Arun P Johny