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