Crear una lista desplegable con opciones a través de document.createElement?

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.

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

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!

preguntado el 12 de junio de 14 a las 10:06

You can't append a text node to a select element, you have to create an option element, append the text to that, then append the option to the select. -

3 Respuestas

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

Puede instanciar el Option like above as a shortcut, or you can use document.createElement('option') to do it the long way.

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

Respondido el 12 de junio de 14 a las 10:06

A select element can only have option or optgroup child elements. To add options using the Constructor de opciones:

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

Respondido el 12 de junio de 14 a las 10:06

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

contestado el 09 de mayo de 19 a las 09:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.