JS Ajax OnClick：PHPコードを複数回実行するには？

Question

私はphpコードを指すjQuery AJAX関数を実行するonclick属性を持つhtmlボタンを持っています。
PHPのコードでは、出力HTML <select>要素にHTMLが書き込まれます（この要素は、JavaScriptが実行されるまで隠されたままです）。
「別のものを追加」ボタンをクリックすると、<select>が入力されます。

問題は1つだけ追加することです。

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

HTMLで：私は新しい<select>タグを持っている問題の2
の最大にボタンアップ「他を追加し、」JSの各クリックで取り込むことができるようにしたいです質問：

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

私はコードが1から目に実行します、私はに移入するためのphpのための2つのhtml <select>要素を含むと考えていましたe次に。なぜこれが正しくないのか分かりますが、コードは両方同時に実行されています。私は考慮しているところに2つのボタン（「1つ追加」「別のものを追加」）がありますが、冗長で正しいとは思われません。特にスケール可能なテクニックが必要です。 。） 私は助けが必要です。

Answer 1

あなたのPHPリクエストは問題ありません。

私は単に

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

：あなたのJavaScriptすなわちを使用して変数を定義して、あなたはそれが要素の値として、応答が含まれる要求を行うたびに意味。これにより、親divを必要なだけ何度も追加することができます。

if ($(".genre_output").length <= 2){ 
    $("PARENT_DIV_ID").append(sel); 
}; 

が、これは明確です：カウンタが追加か維持するかどうかを決定する場合は最後に、シンプルを使用できますか？ @kaari

Answer 2

）（HTMLの代わりに）あなたは、あなたが（追加しようとすることができドロップダウンに以前の値を維持したいと仮定すると、

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