Question

我的html文件中有以下select元素：

<select id="usr-slct">
</select>

我试图在文档结束之前在脚本标记中使用javascript添加一些选项。像这样：

var selector = document.getElementById("usr-slct");
var newoption = document.createElement("option").text="User1";
selector.add(newoption);

我想知道为什么这段代码不能让我的页面在select中显示新选项，如何让它按预期工作？

Answer 1

您的select元素有一个'options'属性，它是一个数组。您可以使用以下方法创建新选项：

selector.options[selector.options.length] = new Option('text1', 'value1');

这会在选择器的options数组的末尾添加一个新的Option，文本为text1，值为value1，这将返回您要查找的结果。

Answer 2

document.createElement("option").text="User1"会返回"User1"，即作业的结果，而不是HTMLOptionElement。你应该编码：

var newoption = document.createElement("option");
newoption.text = "User1";
selector.add(newoption);

修改：OP正在使用.add()方法向option元素添加select。 HTMLSelectElement object does have .add() method.

Answer 3

这里的问题是你要这样做：

var newoption = document.createElement("option").text = "User1";

这是两次错误：

首先，在Javascript中，赋值返回指定的值，因此将"User1"分配给新创建的选项的text属性会导致变量保存字符串"User1"，而不是元素;你必须首先创建元素，然后更改其文本。
其次，您应该更改textContent属性，而不是text属性，这对DOM没有任何意义。

这里有正确的代码：

var selector = document.getElementById("usr-slct");
var newoption = document.createElement("option");

newoption.textContent = "User1";
selector.add(newoption);

向html选择元素添加选项

3 个答案: