使用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;