AJAX를 사용하는 Jquery For 루프

Question

데이터베이스에서 가져온 옵션의 드롭 다운 메뉴를 표시하려고합니다 (이들을 검색하기 위해 아약스를 사용했습니다). 아약스를 사용하여 데이터를 검색하는 것은 작동하지만 문제가있는 것은이를 표시하는 것입니다.

이것은 내 코드입니다.

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

는이 지금 내 예상 출력은 단일 메뉴 드롭 다운하지만 내가 갖는 모든 retval[i].advocacy_name에 대한 드롭 다운 메뉴가 될 것 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); 
      } 

     } 
    }) 
} 

입니다. 어떻게 해결할 수 있습니까?

Answer 1

반환 된 배열의 각 옵션에 대해 전체 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); 
} 

Answer 2

가 $("#advocacy").append(addAd); 루프 밖에서해야하고, 같은 요소를 overwritting 때문에 그것은 replaceWith 대신 append해야한다 : 대신 콜백을보십시오.

또한 루프 안에는 option 요소 만 추가하면됩니다.

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

     } 
    }) 
} 

Answer 3

루프를 반복 할 때마다 전체 <div>을 추가합니다.

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

또는 A 라인에 루프를 감소 : 만 <option>의를 생성하는 루프를 사용

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