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. Los campos obligatorios están marcados con *