我想要实现的目标很简单:当您按下按钮时,它会创建一个带选项的选择元素。我可以做精选元素,但选项,而不是。我尝试了很多东西。这是我使用的代码,有一些注释可以提供帮助。
<!--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元素,最后将其放入文档中。我知道我做错了什么。
我认为我创建文本节点的方法不正确。我认为还有别的东西。如果您知道答案,请告诉我正确的代码行?那太好了。是的,我已经看过任何可以寻求帮助的消息来源但无济于事。
感谢您阅读并帮助我!
答案 0 :(得分:6)
您将文本节点附加到选择权,这是不对的。您应该添加一个选项:
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"));
答案 1 :(得分:1)
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);
答案 2 :(得分:0)
<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>