使用AJAX的Jquery For循环

Question

I'm trying to display a drop down menu of options that are from database (I used ajax to retrieve these). The retrieving of the data using ajax is working but what I'm having trouble is displaying them.

This is my code.

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

and this is the jquery code

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

        }
    })
}

now my expected output would be a single drop down menu but what I'm getting is a drop down menu for every retval[i].advocacy_name. How can i fix it?

Answer 1

You are trying to insert the whole SELECT component for each option of the returned array. Try this callback instead:

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