【问题标题】：Ajax clear results before new requestAjax 在新请求之前清除结果
【发布时间】：2021-02-15 18:34:22
【问题描述】：

我有 ajax 代码根据下拉列表中的选定选项从 API 返回数据，问题是当我更改下拉选项时，它不会清除旧数据，而只是将新数据添加到我追加中的先前数据。

逻辑

从下拉列表中选择选项 1 postchoose
在下拉列表中追加结果 2 postdets
更改下拉菜单中的选项 1 postchoose
清除下拉列表中的选项 2 postdets
将新数据追加到下拉列表 2 postdets

代码

$('body').on('change', '#postchoose', function(e){
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
    });
    var cityID = $("#city option:selected").val();
    var weight = ["{{$totalWeight}}"];
    var courierName = $(this).val();
    if(courierName) {
        $.ajax({
          url: '{{ url('rajaajax') }}/'+weight+'/'+cityID+'/'+encodeURI(courierName),
          type: "GET",
          dataType: "json",
          success:function(data) {
            // append data
            $('select[name="postdets"]').append('<option>test</option');
          }
        });
    } else {
      $('select[name="postdets"]').empty().append("<option value='' selected>Pilih</option>");
    }
});

问题

当courierName在新数据追加之前更改时，如何清除我的追加部分success:function(data) {？

【问题讨论】：

不清楚您要做什么，或者哪个字段是哪个字段。请编辑您的问题以使其更清晰，最好包含您的 HTML。在任何情况下，API 返回数据时运行的代码都是success:function(data) {，因此您应该在此处进行处理。
@kmoser 我已经为我的问题添加了逻辑

标签： jquery ajax

【解决方案1】：

您似乎在添加新选项之前没有清除$('select[name="postdets"]')。您可以尝试在成功功能后立即添加$('select[name="postdets"]').empty()。

$.ajax({
  ...
  success: function(data) {
    $('select[name="postdets"]').empty();
    ...
  }
});

【讨论】：

谢谢我不得不改进你的答案以符合我的逻辑，但我投票赞成你的答案。

【解决方案2】：

已解决

我希望在第一个下拉列表中更改选项后立即清除第二个下拉列表。这是我所做的：

$('body').on('change', '#postchoose', function(e){
  $('select[name="postdets"]').empty().append("<option value='' selected>Processing...</option>");
  //other lines....
  $.ajax({
    url: '{{ url('rajaajax') }}/'+weight+'/'+cityID+'/'+encodeURI(courierName),
    type: "GET",
    dataType: "json",
    success:function(data) {
      $('select[name="postdets"]').empty().append("<option value='' selected>Select</option>");
      //rest of it...
    }
  });
});

现在，当我更改第一个下拉菜单的选项时，它会显示 processing...，当数据准备好时，它会显示 select。

【讨论】：