如何在香草javascript中动态添加选项到现有选择
Posted
技术标签:
【中文标题】如何在香草javascript中动态添加选项到现有选择【英文标题】：how to dynamically add options to an existing select in vanilla javascript 【发布时间】：2013-07-17 19:49:35 【问题描述】：我想使用纯 javascript 为选择动态添加选项。我能找到的一切都涉及 JQuery 或尝试动态创建选择。我能找到的最接近的东西是Dynamically add input type select with options in 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);
这根本没有改变页面中的选择。知道为什么吗？我确实检查了代码是否正在运行并发出警报。
编辑：这个想法确实奏效了，结果发现它没有在下拉列表中显示值。我不知道为什么，但我可以弄清楚我认为的那个。
【问题讨论】：
“option”后面的单引号不需要。 应该是"<option>Hello world</option>"
是的，单引号不仅仅是不必要的，它们是 HTML 中的语法错误。
【参考方案1】：
本教程准确地展示了您需要做什么：Add options to an HTML select box with javascript
基本上：
daySelect = document.getElementById('daySelect');
daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');
【讨论】：
这个建议设法让我的文本正确显示，而其他建议由于某种原因不能。 翻遍其他资料后的最佳答案 你也可以使用daySelect.options.add( new Option('Key','Value') )
对我来说，我必须先设置选项的长度，然后再添加选项。否则它不会添加选项。 deleteSelect.options.length = 2; deleteSelect.options[0] = new Option(messageResources.True, "true"); deleteSelect.options[0] = new Option(messageResources.False, "false");【参考方案2】：
我想这样的事情可以完成这项工作。
var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);
【讨论】：
document.createElement("day") -> 'day' 不是正确的标签名称，您需要 'option' 代替。 谢谢大家的回答。【参考方案3】：最简单的方法是：
selectElement.add(new Option('Text', 'value'));
是的，就这么简单。它甚至可以在 IE8 中使用。并有其他可选参数。
查看文档：
HTMLSelectElement.add(item[, before])
new Option(text, value, defaultSelected, selected);
【讨论】：
【参考方案4】：使用 document.createElement 函数，然后将其添加为您选择的子项。
var newOption = document.createElement("option");
newOption.text = 'the options text';
newOption.value = 'some value if you want it';
daySelect.appendChild(newOption);
【讨论】：
【参考方案5】：.add() 也可以。
var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(myOption);
W3 School - try
【讨论】：
daySelect.add(option);需要 daySelect.add(myOption);【参考方案6】：试试这个；
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');
【讨论】：
【参考方案7】：<html>
<head></head>
<body>
<select id="ddl"></select>
</body>
<script>
var ddl = $("#ddl");
ddl.empty();
ddl.append($("<option></option>").val("").html("--Select--"));
</script>
</html>
【讨论】：
请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票。以上是关于如何在香草javascript中动态添加选项到现有选择的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 的香草 JavaScript 版本 .click