如何在vanilla javascript中动态添加选项到现有选择

Question

我想使用普通的javascript动态地为选择添加选项.我能找到的一切都涉及JQuery或尝试动态创建选择.我能找到的最接近的东西是动态添加输入类型select和Javascript中的选项,后者是后者,并且是我发现的唯一不涉及JQuery的选项.虽然我确实试过这样使用它:

daySelect = document.getElementById('daySelect');
daySelect.innerHTML += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)

在我这样做之后,选择没有变化,警报给了我

HELLO WORLD</option'>

如果这很简单,我很抱歉,但我对javascript和网络编程很新.谢谢你的帮助.

编辑:所以我尝试了这样的建议.

daySelect = document.getElementById('daySelect');
myOption = document.createElement("option");
myOption.text = "Hello World";
myOption.value = "Hello World";
daySelect.appendChild(myOption);

这根本没有改变页面中的选择.知道为什么吗？我确实检查了代码是否正在运行警报.

编辑:这个想法确实有效,它只是证明它没有在下拉列表中显示一个值.我不知道为什么,但我认为我可以想出那一个.

Answer 1

本教程准确显示了您需要执行的操作:使用javascript将选项添加到HTML选择框

基本上:

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');

Answer 2

我猜这样的事情会起到作用.

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);

Answer 3

最简单的方法是：

selectElement.add(new Option('Text', 'value'));

是的，就这么简单。它甚至在 IE8 中也能工作。并有其他可选参数。

查看文档：

• HTMLSelect?Element?.add(item[, before])
  
• new Option(text, value, defaultSelected, selected);

Answer 4

使用document.createElement函数,然后将其添加为select的子项.

var newOption = document.createElement("option");
newOption.text = 'the options text';
newOption.value = 'some value if you want it';
daySelect.appendChild(newOption);