javascript 通过 document.createElement 创建带有选项的下拉列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24181244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a drop down list with options through document.createElement?
提问by KarteMushroomPandas
What I want to achieve is simple: when you press a button, it creates a select element with options. I can do the select element fine, but the option, not so much. I've tried numerous things. Here's the code that I used, with some comments to help out.
我想要实现的目标很简单：当您按下按钮时，它会创建一个带有选项的选择元素。我可以很好地完成 select 元素，但选项不是很多。我尝试了很多东西。这是我使用的代码，有一些注释可以提供帮助。
<!--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>
Hopefully the comments helped out. What's supposed to happen is that a select element is generated along with a text node. Then the two are appended together. Finally, all that stuff is appended to a p element, which is finally placed into the document. I know I'm doing something wrong.
希望评论有所帮助。应该发生的是，选择元素与文本节点一起生成。然后将两者附加在一起。最后，所有这些东西都被附加到 ap 元素，它最终被放入文档中。我知道我做错了什么。
I think that my method of creating a text node isn't correct. I think there's something else. If you know the answer could you please tell me the correct line of code? That would be great. And yes, I HAVE looked at any sources I can find for help but to no avail.
我认为我创建文本节点的方法不正确。我想还有别的东西。如果你知道答案，你能告诉我正确的代码行吗？那很好啊。是的，我已经查看了我可以找到的任何来源以寻求帮助，但无济于事。
Thanks for reading and helping me out!
感谢您阅读并帮助我！
回答by MrCode
You're appending a text node to a select, which isn't right. You should append an option instead:
您将文本节点附加到选择中，这是不对的。您应该添加一个选项：
var newListData = new Option("my label", "my value");
//Here we append that text node to our drop down list.
newList.appendChild(newListData);
You can instantiate the Optionlike above as a shortcut, or you can use document.createElement('option')to do it the long way.
您可以将Option上面的类似实例实例化为快捷方式，或者您可以使用document.createElement('option')它来做很长的路要走。
It can be simplified further by losing the variable and just directly appending new options:
可以通过丢失变量并直接附加新选项来进一步简化：
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"));
回答by RobG
A select element can only have option or optgroup child elements. To add options using the Option constructor:
select 元素只能有 option 或 optgroup 子元素。要使用Option 构造函数添加选项：
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);
回答by Pankaj Upadhyay
<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>
