Hola a todos, hoy os voy a explicar como crear un select HTML en Javascript
Para crear elementos HTML con Javascript de forma dinámica.
Para crear un select en Javascript, lo haremos de la siguiente forma:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function init() { let select = document.createElement("select"); let option1 = document.createElement("option"); option1.setAttribute("value", "value1"); let option1Texto = document.createTextNode("opcion 1"); option1.appendChild(option1Texto); let option2 = document.createElement("option"); option2.setAttribute("value", "value2"); let option2Texto = document.createTextNode("opcion 2"); option2.appendChild(option2Texto); let option3 = document.createElement("option"); option3.setAttribute("value", "value3"); let option3Texto = document.createTextNode("opcion 3"); option3.appendChild(option3Texto); select.appendChild(option1); select.appendChild(option2); select.appendChild(option3); document.body.appendChild(select); } window.onload = init; |
Este es el resultado:
También os los dejo como función:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
function init() { let options = [ { value: "value1", text: "opcion 1" }, { value: "value2", text: "opcion 2" }, { value: "value3", text: "opcion 3" } ]; let select = createSELECT(options); document.body.appendChild(select); } function createSELECT(options) { let select = document.createElement("select"); if (options && Array.isArray(options)) { for (let index = 0; index < options.length; index++) { const element = options[index]; let option = document.createElement("option"); if (element.value) { option.setAttribute("value", element.value); } if (element.text) { let optionText = document.createTextNode(element.text); option.appendChild(optionText); } select.appendChild(option); } } return select; } window.onload = init; |
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta