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

2023-12-02

我想使用纯 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);

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

编辑:这个想法确实有效,只是事实证明它没有在下拉列表中显示值。我不知道为什么,但我想我能弄清楚。


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

基本上:

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在vanilla javascript中动态添加选项到现有选择 的相关文章

随机推荐