JS Ajax OnClick：如何多次执行php代码？

Question

我有一个带有onclick属性的html按钮，它运行一个指向php代码的jQuery AJAX函数  php代码在输出HTML <select>元素中写入HTML（该元素在javascript运行之前保持隐藏状态。）
当单击“添加另一个”按钮时，这可以很好地填充<select>。

问题是它只添加了一个。我希望能够使用每次点击“添加另一个”按钮填充新的<select>标记，最多为2个。
有问题的JS：

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

我以为我可以包含2个html <select>元素供php填充，代码将从一个执行到下一个。我明白为什么这不正确，代码同时在两者中运行。我正在考虑有2个按钮的地方（“添加一个”，“添加另一个”），但这似乎多余且不正确，特别是考虑到我需要一种可扩展的技术（最大值可能并不总是2 。）我需要帮助。

Answer 1

你的php请求没问题。

我只是将变量定义为使用javascript，即：

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

然后每次执行请求时，它都会将响应包含在元素的值中。这将允许您根据需要多次追加父div。最后，使用简单的if计数器来决定是否继续追加：

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

这更清楚吗？ @kaari

Answer 2

假设你想在下拉列表中保留以前的值，那么你可以尝试append（）而不是html（）

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