javascript - 通过 document.createElement 创建一个带有选项的下拉列表？

Question

我想要实现的很简单:当您按下一个按钮时，它会创建一个带有选项的选择元素。我可以很好地选择元素，但选项却没有那么多。我试过很多东西。这是我使用的代码，其中有一些注释可以提供帮助。

 <!--This is the element that we append the JavaScript to. The code that achieves the task is at the bottom.-->
<p id="clonePanel"></p>
<script>
//Don't worry about the first pid stuff.
var pid = 0;
function dupPan() {
    pid++;
    //Here we create a "p" element. The following code is the element's content and specs.
    var newPanel = document.createElement("p");
    newPanel.id=pid;
    //Here we create a "select" element (a drop down list).
    var newList = document.createElement("select");
    //Here we create a text node.
    var newListData = document.createTextNode("Example of option");
    //Here we append that text node to our drop down list.
    newList.appendChild(newListData);
    //Here we append our list to our "p" element.
    newPanel.appendChild(newList);
    //Finally, we append the "p" element to the document, or the "clonePanel" p element.
    document.getElementById("clonePanel").appendChild(newPanel);
}
</script>

希望评论对您有所帮助。应该发生的是选择元素与文本节点一起生成。然后将两者附加在一起。最后，所有这些东西都附加到 p 元素，最终将其放入文档中。我知道我做错了什么。

我认为我创建文本节点的方法不正确。我想还有别的东西。如果您知道答案，能否请您告诉我正确的代码行？那太好了。是的，我已经查看了我可以找到的所有资源以寻求帮助，但无济于事。

感谢阅读并帮助我!

Answer 1

您将文本节点附加到选择，这是不正确的。您应该附加一个选项:

var newListData = new Option("my label", "my value");
//Here we append that text node to our drop down list.
newList.appendChild(newListData);

您可以像上面那样实例化 Option 作为快捷方式，或者您可以使用 document.createElement('option') 来完成它。

可以通过丢失变量并直接附加新选项来进一步简化:

newList.appendChild(new Option("my label 1", "my value 1"));
newList.appendChild(new Option("my label 2", "my value 2"));
newList.appendChild(new Option("my label 3", "my value 3"));