使用Ajax显示数据的onchange功能

Question

嘿，伙计们，这是我对改变功能

<select name="select-native-1" id="namakota" data-native-menu="false"> 
     <option value="-1" selected="selected" disabled="disabled" >City</option> 
     <option value="surabaya">Surabaya</option> 
     <option value="jakarta">Jakarta</option> 
    </select> 

，这是我的div和平变化的功能

 <ul class="rig columns-2" id="daftaracara" data-filter="true" data-filter-placeholder="Cari Acara"> 

     </ul> 
     $(document).on('change', '#pilihkota', function() { 
      //event.preventDefault(); 
      var kota = $(this).val(); 
      //alert(kota); 
       $.ajax({ 
       url: host+'/skripsi3/phpmobile/asd.php', 
       data: { "id": user,"kota": kota}, 
       dataType: 'json', 
       success: function(data, status){ 

        $.each(data, function(i,item){ 

        if(item.kosong=="tidak") 
        { 

         if(item.cekfol=="ya") 
         { 

           $('#daftaracara').append('<li><img id="gambar" onclick="detailAcara('+item.idacara+')" onclick="detailAcara('+item.idacara+')" src="web/uploads/'+item.gambar+'" alt=""><h2>'+item.nama+'</h2>'+'<p style="font-size:18px; color:#333366;">'+item.tanggal+'</p><p style="font-size:14px; color:#00F;">Lokasi : '+item.lokasi+'</p><p style="font-size:14px; color:#F00;">Pemesanan : '+item.pesan+'</p><a data-role="button" class="following green followButton" style="background: green; color: white;" onclick="simpanacara('+item.idacara+')">Following</a></li>').trigger("create");  

         } 
         else if(item.cekfol=="tidak") 
         { 

           $('#daftaracara').append('<li><img id="gambar" onclick="detailAcara('+item.idacara+')" onclick="detailAcara('+item.idacara+')" src="web/uploads/'+item.gambar+'" alt=""><h2>'+item.nama+'</h2>'+'<p style="font-size:18px; color:#333366;">'+item.tanggal+'</p><p style="font-size:14px; color:#00F;">Lokasi : '+item.lokasi+'</p><p style="font-size:14px; color:#F00;">Pemesanan : '+item.pesan+'</p><a data-role="button" class="follow ui-btn-b followButton" data-theme="b" onclick="simpanacara('+item.idacara+')">Follow</a></li>').trigger("create");  

         } 
         $("#daftaracara").show(); 
        } 
        else if(item.kosong=="ya") 
        { 
         $("#daftaracara").hide(); 
        } 

        }); 

       }, 
       error: function(ts){ 
        alert(ts.responseText); 
       } 
      }); 
     }); 

在“泗水”有2个的结果数据，并在“雅加达”有1个结果数据。首先当我选择“泗水”结果是好的，只显示2个数据，但是当我选择“泗水”后的“雅加达”结果显示3个数据是来自“surabaya”的2个数据和1个来自“雅加达”的数据。当我从我的PHP检查其工作正常。我的目标是ajax结果可以显示正确的结果。也许有人可以告诉我我的代码有什么问题。这件事我真的很新鲜。谢谢你们，祝你有美好的一天！

Answer 1

使用空来清除之前的值：

success: function(data, status){ 
        $('#daftaracara').empty();//here clear the previous values 
        $.each(data, function(i,item){ 

        if(item.kosong=="tidak") 
        { 

         if(item.cekfol=="ya") 
         { 

           $('#daftaracara').append('<li><img id="gambar" onclick="detailAcara('+item.idacara+')" onclick="detailAcara('+item.idacara+')" src="web/uploads/'+item.gambar+'" alt=""><h2>'+item.nama+'</h2>'+'<p style="font-size:18px; color:#333366;">'+item.tanggal+'</p><p style="font-size:14px; color:#00F;">Lokasi : '+item.lokasi+'</p><p style="font-size:14px; color:#F00;">Pemesanan : '+item.pesan+'</p><a data-role="button" class="following green followButton" style="background: green; color: white;" onclick="simpanacara('+item.idacara+')">Following</a></li>').trigger("create");  

         } 
         else if(item.cekfol=="tidak") 
         { 

           $('#daftaracara').append('<li><img id="gambar" onclick="detailAcara('+item.idacara+')" onclick="detailAcara('+item.idacara+')" src="web/uploads/'+item.gambar+'" alt=""><h2>'+item.nama+'</h2>'+'<p style="font-size:18px; color:#333366;">'+item.tanggal+'</p><p style="font-size:14px; color:#00F;">Lokasi : '+item.lokasi+'</p><p style="font-size:14px; color:#F00;">Pemesanan : '+item.pesan+'</p><a data-role="button" class="follow ui-btn-b followButton" data-theme="b" onclick="simpanacara('+item.idacara+')">Follow</a></li>').trigger("create");  

         } 
         $("#daftaracara").show(); 
        } 
        else if(item.kosong=="ya") 
        { 
         $("#daftaracara").hide(); 
        } 

        }); 

       }, 

Answer 2

由于您使用$.append()函数的结果将是增加结果'#daftaracara' DIV结果。请在每个Ajax请求之前将div空白。它将清除该格中的所有以前的数据。

在结果的开头使用$('#daftaracara').empty()。即在线

success: function(data, status){ 
$('#daftaracara').empty(); 
then rest your code;