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"));

Answer 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);

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

通过document.createElement创建一个包含选项的下拉列表？

3 个答案: