javascript - AJAX 附加选项无效

Question

我尝试使用 AJAX 请求加载选择的选项。 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 中，我可以看到选项文本中没有颜色语法。请参阅此屏幕截图以更好地理解:/image/5oFKf.jpg

如您所见，灰色选项是 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>

希望对您有所帮助。