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

【问题标题】：Create a drop down list with options through document.createElement?通过 document.createElement 创建一个带有选项的下拉列表？
【发布时间】：2014-08-02 14:12:32
【问题描述】：

我想要实现的很简单：当你按下一个按钮时，它会创建一个带有选项的选择元素。我可以很好地执行选择元素，但选项不是很多。我已经尝试了很多东西。这是我使用的代码，还有一些 cmets 可以提供帮助。

 <!--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>

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

我认为我创建文本节点的方法不正确。我觉得还有别的。如果您知道答案，请告诉我正确的代码行吗？那很好啊。是的，我已经查看了可以找到的任何帮助资源，但无济于事。

感谢您阅读并帮助我！

【问题讨论】：

您不能将文本节点附加到选择元素，您必须创建一个选项元素，将文本附加到该元素，然后将选项附加到选择。

标签： javascript code-generation

【解决方案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"));

【讨论】：

【解决方案2】：

一个 select 元素只能有 option 或 optgroup 子元素。使用Option constructor 添加选项：

var select = document.createElement('select');

// Use the Option constructor: args text, value, defaultSelected, selected
var option = new Option('text', 'value', false, false);
select.appendChild(option);

// Use createElement to add an option:
option = document.createElement('option');
option.value = 'theValue';
option.text = 'the text';
select.appendChild(option);

【讨论】：

【解决方案3】：

<span id="minExp"></span>
<script>
var minExp = document.getElementById("minExp");

//Create array of options to be added
var array = ["1","2","3","4","5","6","7","8","9","10","10","12","13","14","15","16","17","18","19","20","21","22","23","24"];

//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "minExperience");
selectList.setAttribute("class", "form-control");
selectList.setAttribute("name", "minExperience");
minExp.appendChild(selectList);

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.setAttribute("value", array[i]);
    option.text = array[i]+' Years';
    selectList.appendChild(option);
}
</script>

【讨论】：