如何在 vanilla javascript 中向现有选择动态添加选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17730621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to dynamically add options to an existing select in vanilla javascript
提问by avorum
I'd like to add option to a select dynamically using plain javascript. Everything I could find involves JQuery or tries to create the select dynamically as well. The closest thing I could find was Dynamically add input type select with options in Javascriptwhich does the latter and was the only I found that doesn't involve JQuery. Although I did try and use it like so:
我想使用普通的 javascript 动态地向选择添加选项。我能找到的所有内容都涉及 JQuery 或尝试动态创建选择。我能找到的最接近的东西是在 Javascript 中动态添加带有选项的输入类型选择，后者执行后者，并且是我发现的唯一不涉及 JQuery 的方法。虽然我确实尝试过使用它：
daySelect = document.getElementById('daySelect');
daySelect.innerHTML += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)
After I did this there was no change to the select and the alert gave me
在我这样做之后，选择没有改变，警报给了我
HELLO WORLD</option'>
I apologize if this is simple but I'm very new at javascript and web programming in general. Thank you for any assistance.
如果这很简单，我深表歉意，但总的来说，我对 javascript 和网络编程非常陌生。感谢您提供任何帮助。
EDIT: So I tried the given suggestions like so.
编辑：所以我像这样尝试了给定的建议。
daySelect = document.getElementById('daySelect');
myOption = document.createElement("option");
myOption.text = "Hello World";
myOption.value = "Hello World";
daySelect.appendChild(myOption);
This has not changed the select in the page at all. Any idea why? And I did check that the code was being run with an alert.
这根本没有改变页面中的选择。知道为什么吗？我确实检查了代码是否在运行时发出警报。
EDIT: The idea did work, it just turned out that it wasn't displaying a value in the dropdown. I don't know why but I can figure that one out I think.
编辑：这个想法确实奏效了，只是结果它没有在下拉列表中显示值。我不知道为什么，但我可以想出我认为的那个。
回答by Drew
This tutorial shows exactly what you need to do: Add options to an HTML select box with javascript
本教程准确显示了您需要执行的操作：使用 javascript 向 HTML 选择框添加选项
Basically:
基本上：
daySelect = document.getElementById('daySelect');
daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');
回答by intuitivepixel
I guess something like this would do the job.
我想这样的事情可以完成这项工作。
var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);
回答by Lochemage
Use the document.createElement function and then add it as a child of your select.
使用 document.createElement 函数，然后将其添加为您选择的子项。
var newOption = document.createElement("option");
newOption.text = 'the options text';
newOption.value = 'some value if you want it';
daySelect.appendChild(newOption);
回答by user
The simplest way is:
最简单的方法是：
selectElement.add(new Option('Text', 'value'));
Yes, that simple. And it works even in IE8. And has other optional parameters.
是的，就这么简单。它甚至可以在 IE8 中工作。并有其他可选参数。
See docs:
查看文档：
回答by Esteban Lezama
.add() also works.
.add() 也有效。
var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(option);
回答by user28864
Try this;
试试这个;
var data = "";
data = "<option value = Some value> Some Option </option>";
options = [];
options.push(data);
select = document.getElementById("drop_down_id");
select.innerHTML = optionsHTML.join('\n');
