我想使用纯javascript动态地将选项添加到select中。我所能找到的一切都涉及JQuery,或者尝试动态创建select。我能找到的最接近的东西是在Javascript中动态添加带有选项的输入类型select,它实现了后者,也是我发现的唯一一个不涉及JQuery的输入类型。尽管我确实尝试过这样使用它:
daySelect = document.getElementById('daySelect');
daySelect.innerHTML += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)
在我这样做之后,选择没有改变,警报给了我
HELLO WORLD</option'>
如果这很简单,我很抱歉,但我对javascript和web编程很陌生。感谢您的帮助。
编辑:所以我尝试了给出的建议。
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');
我想这样的东西可以完成任务。
var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);
最简单的方法是:
selectElement.add(new Option('Text', 'value'));
是的,就这么简单。它甚至在IE8中也有效。并且具有其他可选参数。
参见文档:
HTMLSelectElement.add(item[, before])
new Option(text, value, defaultSelected, selected);
使用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学校-尝试
试试这个;
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');
<html>
<head></head>
<body>
<select id="ddl"></select>
</body>
<script>
var ddl = $("#ddl");
ddl.empty();
ddl.append($("<option></option>").val("").html("--Select--"));
</script>
</html>