anzeigen Daten mit Ajax Onchange Funktion

Question

Hey Jungs das ist meine auf Änderungsfunktion

<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> 

und das ist mein div und Onchange Funktion

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

In "surabaya" gibt es 2 Ergebnisdaten und in "Jakarta" gibt es 1 Ergebnisdaten. Zuerst, wenn ich "surabaya" auswähle, ist das Ergebnis in Ordnung, zeige nur 2 Daten, aber wenn ich "jakarta" nach "surabaya" wähle, dann zeigt das Ergebnis 3 Daten, das sind 2 Daten von "surabaya" und 1 Daten von "jakarta". Wenn ich von meinem php überprüfe, funktioniert es gut. Mein Ziel ist ein AJAX-Ergebnis, das das korrekte Ergebnis anzeigen kann. Vielleicht kann mir jemand sagen, was mit meinem Code nicht stimmt. Ich bin wirklich Neuling mit dieser Sache. Danke Jungs und Schönen Tag !!

Answer 1

Verwenden leeren die vorherigen Werte löschen:

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

Da Sie $.append() Funktion Ergebnis verwenden, werden Ergebnis '#daftaracara' div Ergebnis sein hinzuzufügen. Bitte mach div vor jeder Ajax-Anfrage leer. Es löscht alle vorherigen Daten in diesem div.

Verwenden Sie $('#daftaracara').empty() am Anfang des Ergebnisses. d. h. nach der Linie

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