AJAX append option non valide

Question

J'essaie de charger les options d'un select avec une requête AJAX. La requête AJAX est correcte et renvoie ce que je veux. Voici mon code:

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

Les options sont bien ajoutées à la sélection, mais elles n'apparaissent pas dans la liste déroulante. Dans Chrome, je peux voir qu'il n'y a pas de syntaxe de couleur dans le texte d'option. Voir cette capture d'écran pour bien comprendre: http://imgur.com/a/4NZB5

Comme vous pouvez le voir, les options sont grises celles ajoutées par AJAX, et je ne vois pas les uns dans ma sélection menu déroulant

Pourquoi est-ce arrivé?

Merci à l'avance

Answer 1

obtenu une réponse ici: https://arstechnica.com/civis/viewtopic.php?t=209624

Généralement insertion DOM utilise .insert

Exemple:

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

À partir du code ci-dessus, vous devriez être pointant vers une dernière option à l'intérieur de votre élément de sélection où vous se va ajouter après, par exemple votre index 0 ou 1

Exemple Snippet

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>

J'espère que cela aide.

Answer 2

Essayez cette

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