Javascript jqueryforloop与AJAX

我试图显示来自数据库的选项的下拉菜单（我使用ajax检索这些选项）。使用ajax检索数据是可行的，但我遇到的问题是显示它们

这是我的密码

<div id='advocacy'>
    <select name='advocacy[]'>
        <?php
            while ($row = mysqli_fetch_array($data)){
                echo "<option>".$row['advocacy_name']."</option>";
            }
        ?>
    </select>

    <a href="#" id="add">Add</a>
</div>

这是jquery代码

$(document).ready(function(){

    $("#add").click(function(){
        fetch();
    });

    $("#advocacy").on("click", "#remove", function(){
        $(this).parent("div").remove();
    });
});


function fetch(){
    $.ajax({
        url: "viewAd.php",
        method: "POST",
        dataType: "json",
        success: function(retval){
            for (var i = 0; i<retval.length; i++){
                addAd = "<div id='advocacy'><select name='advocacy[]'><option>"+retval[i].advocacy_name+"</option></select><a href='#' id='remove'>Remove</a></div>";

                $("#advocacy").append(addAd);
            }

        }
    })
}

$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
fetch（）；
});
$（“#倡导”）。在（“单击”，“删除”，函数（）上）{
$（this.parent（“div”）.remove（）；
});
});
函数fetch（）{
$.ajax({
url:“viewAd.php”，
方法：“张贴”，
数据类型：“json”，
成功：函数（retval）{
对于（var i=0；i您正在尝试为返回数组的每个选项插入整个SELECT组件。请尝试此回调：

success: function(retval){
        var addAd = "<div id='advocacy'><select name='advocacy[]'>"
        for (var i = 0; i<retval.length; i++){
            addAd +="<option>"+retval[i].advocacy_name+"</option>";
        }
        addAd += "</select><a href='#' id='remove'>Remove</a></div>";    
        $("#advocacy").html(addAd);
}

成功：函数（retval）{
var addAd=“”
对于（var i=0；i，
$（“#”）append（addAd）
应该在循环之外，并且应该是
replacetwith
而不是
append
，因为您正在覆盖相同的元素

此外，在循环内部，您应该只添加
选项
元素

function fetch(){
    $.ajax({
        url: "viewAd.php",
        method: "POST",
        dataType: "json",
        success: function(retval){
            var addAd = '';
            for (var i = 0; i<retval.length; i++){
                addAd += "<option>"+retval[i].advocacy_name+"</option>";
            }
            addAdd = '<div id='advocacy'><select name='advocacy[]'>'+ addAd + '</select><a href='#' id='remove'>Remove</a></div>';
            $("#advocacy").replaceWith(addAd);

        }
    })
}

函数fetch（）{
$.ajax({
url:“viewAd.php”，
方法：“张贴”，
数据类型：“json”，
成功：函数（retval）{
var addAd=''；
对于（var i=0；i您在循环的每次迭代中都添加了一个完整的
。仅使用循环生成
s:

success: function(retval) {
  let options = '';
  for (var i = 0; i < retval.length; i++){
    options += `<option>${retval[i].advocacy_name}</option>`;
  }
  let addAd = `<div id='advocacy'><select name='advocacy[]'>${options}</select><a href='#' id='remove'>Remove</a></div>`;
  $("#advocacy").replaceWith(addAd);
}

成功：函数（retval）{
让选项=“”；
对于（变量i=0；i

或者将循环减少为一条直线：

success: function(retval) {
  let options = retval.map(r => `<option>${r.advocacy_name}</option>`).join('');
  let addAd = `<div id='advocacy'><select name='advocacy[]'>${options}</select><a href='#' id='remove'>Remove</a></div>`;
  $("#advocacy").replaceWith(addAd);
}

成功：函数（retval）{
让options=retval.map（r=>`${r.u name}`）。join（“”）；
设addAd=`${options}`；
美元（“#倡导”）。替换为（addAd）；
}