Como crear un select HTML en Javascript con DOM

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:


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:


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.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada.