JS Ajax OnClick: Wie PHP-Code mehrmals ausführen?

Question

Ich habe eine HTML-Schaltfläche mit einem onclick-Attribut, das eine jQuery AJAX-Funktion ausführt, die auf PHP-Code zeigt.
Der PHP-Code schreibt HTML in ein Ausgabe-HTML <select> Element (das Element bleibt ausgeblendet, bis das Javascript ausgeführt wird.)
Dies funktioniert hervorragend, um die <select> zu füllen, wenn auf eine Schaltfläche "Weitere hinzufügen" geklickt wird.

Das Problem ist, fügt man eins und nur eins hinzu. Ich möchte mit jeder Klicken der „fügen Sie eine weitere“ Taste bis zu einem Maximum von 2.
Die JS in Frage eine neue <select> Tag füllen zu müssen fähig sein:

var genre_dropdown = function genre_dropdown() { 
    $('.genre_output').css('display', 'block'); 
    $.ajax({ 
     url:'../includes/functions/genre_dropdown.php', 
     complete: function (response) { 
     $('.genre_output').html(response.responseText); 
     }, 
     error: function() { 
      $('.genre_output').html('Bummer: there was an error!'); 
     } 
    }); 
    return false; 
} 

Die HTML-in Frage:

<select name="genre_id[]" autocomplete="off" class="genre_output"></select> 
    <select name="genre_id[]" autocomplete="off" class="genre_output"></select> 
    <div class="button add-genre-button" onclick="return genre_dropdown();">+ Add Existing Genre</div> 

ich dachte, ich 2 html <select> Elemente für die php des Code zu füllen umfassen könnte in, von einem ausführen würde th Das nächste. Ich sehe, warum das nicht stimmt, der Code läuft gleichzeitig in beiden. Ich bin an einem Ort, an dem ich über zwei Buttons nachdenke ("add one", "add one"), aber das scheint redundant und nicht korrekt, vor allem wenn man eine skalenfähige Technik in Betracht ziehen möchte (max darf nicht immer 2 sein) .) Ich brauche Hilfe.

Answer 1

Ihre PHP-Anfrage ist in Ordnung.

Ich meine einfach eine Variable als mit Hilfe von Javascript definieren d.h .:

var sel = '<select name="genre_id[]" autocomplete="off" class="genre_output">' + response + "</select>'; 

und dann jedes Mal, wenn Sie eine Anfrage machen wird es die Antwort, wenn der Wert des Elements umfasst. Dadurch können Sie das Eltern-Div so oft anhängen, wie Sie möchten. Schließlich verwenden Sie einen einfachen if-Zähler, um zu entscheiden, ob Sie anhängen möchten oder nicht:

Ist das klarer? @kaari

Answer 2

Vorausgesetzt, dass Sie die vorherigen Werte in Dropdown behalten möchten, dann können Sie versuchen anhängen() anstelle von HTML()

$('.genre_output').append(response.responseText);