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

IT技术 javascript select
2021-02-20 18:37:18

我想使用普通的 javascript 动态地向选择添加选项。我能找到的所有内容都涉及 JQuery 或尝试动态创建选择。我能找到的最接近的东西是在 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);

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

编辑：这个想法确实奏效了，只是结果它没有在下拉列表中显示值。我不知道为什么，但我可以想出我认为的那个。

6个回答

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

基本上：

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');
这个建议设法让我的文本正确显示，而其他建议由于某种原因不能。
2021-04-28 18:37:18
对我来说，我必须先设置选项的长度，然后再添加选项。否则它不会添加选项。deleteSelect.options.length = 2; deleteSelect.options[0] = new Option(messageResources.True, "true"); deleteSelect.options[0] = new Option(messageResources.False, "false");
2021-05-16 18:37:18
搜索其他内容后的最佳答案
2021-05-17 18:37:18
你也可以使用 daySelect.options.add( new Option('Key','Value') )
2021-05-17 18:37:18

我想这样的事情可以完成这项工作。

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);
谢谢大家的回答。
2021-05-13 18:37:18
document.createElement("day") -> 'day' 不是正确的标签名称，您需要 'option' 代替。
2021-05-15 18:37:18

最简单的方法是：

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

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

查看文档：

使用 document.createElement 函数，然后将其添加为您选择的子项。

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

.add() 也有效。

var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(myOption);

W3 学校 - 尝试

daySelect.add(option); 需要是 daySelect.add(myOption);
2021-05-16 18:37:18
其它你可能感兴趣的问题
上一篇jQuery 与 javascript？ 下一篇在 config() module中注入依赖项 - AngularJS