AJAX 추가 옵션이 유효하지 않습니다.

Question

AJAX 요청과 함께 select 옵션을로드하려고 시도합니다. AJAX 요청은 정확하고 내가 원하는 것을 반환합니다. 여기 내 코드는 다음과 같습니다.

new Ajax.Request(url, { 
      method: 'post', 
      parameters: {foldertype_id: foldertype}, 
      onSuccess: function(answer) { 
       var folders = JSON.parse(answer.responseText).folders; 
       var selectToFill = $('my_select_box'); 
       for(var i = 0; i <= folders.length; i ++){ 
        selectToFill.append('<option id="' + folders[i].value + '" value="' + folders[i].ID + '">' + folders[i].label + '</option>'); 
       } 
      } 
     }); 

옵션이 잘 선택 항목에 추가되었지만 드롭 다운에 나타나지 않았습니다. Chrome에서는 옵션 텍스트에 색상 구문이 없음을 알 수 있습니다. 당신이 볼 수 있듯이 http://imgur.com/a/4NZB5

, 회색 옵션 사람들은 AJAX에 의해 추가되고, 난 내 선택 드롭 다운 이런 일이 왜

으로 그 하나를 볼 수 없습니다 :이 스크린 샷이 잘 이해를 참조하십시오? 사전

Answer 1

에서

덕분에 여기에 대답을 얻었다 : https://arstechnica.com/civis/viewtopic.php?t=209624 일반적으로 DOM 삽입이 사용

.insert

예 : 위의 코드에서

new Ajax.Request(url, { 
     method: 'post', 
     parameters: {foldertype_id: foldertype}, 
     onSuccess: function(answer) { 
      var folders = JSON.parse(answer.responseText).folders; 
      var selectToFill = $('my_select_box'); 
      for(var i = 0; i <= folders.length; i ++){ 
       selectToFill[0].insert({after: '<option id="' + folders[i].value + '" value="' + folders[i].ID + '">' + folders[i].label + '</option>'}); 
      } 
     } 
}); 

, 당신은해야한다 select 요소 내부의 마지막 옵션을 가리키고 있습니다. 색인 0 또는 1

예 발췌문

const test = ["test1","test2"]; 
 

 
test.forEach(function(index,item){ 
 
\t const sel = $('my_select'); 
 
    sel[0].insert({after: "<option value='"+item+"'>"+item+"</option>"}); 
 
});

<script src="https://fastcdn.org/Prototype/1.7.3/prototype.js"></script> 
 
<select id="my_select" placeholder="test"> 
 
<option value="test">test</option> 
 
</select>

예를 들어, 이후에 추가하려고합니다 그게 도움이되기를 바랍니다.

Answer 2

이 프로토 타입을 사용하고이

var htmlToAppend =""; 

for(var i = 0; i <= folders.length; i ++){ 
htmlToAppend += "<option id='" + folders[i].value + "' value='" + folders[i].ID + "'>" + folders[i].label + "</option>"; 
} 
selectToFill.append(htmlToAppend);