En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista desplegable o select a partir de un arreglo o array.

Te voy a enseñar dos ejemplos: uno para llenar un select con un array de tipo cadena y otro ejemplo más completo para ver cómo llenar un select con un arreglo de objetos, teniendo una propiedad como valor y otra como el texto mostrado.

Obteniendo referencia al select

Lo primero que hay que hacer para agregar elementos a un select es obtener una referencia al mismo. Esto se puede hacer con document.getElementById o querySelector.

Antes de obtener una referencia, debes asignar un id a tu select. Yo prefiero usar querySelector, así que para obtener una referencia al select puedo usar:

const $select = document.querySelector("#idDelSelect");

Fíjate que estoy prefijando mi constante con $, esto es una preferencia mía que sirve para saber que esa constante apunta a un elemento del DOM, pero no es obligatorio prefijarla así.

El select puede tener cualquier id, solo asegúrate de colocarlo correctamente al invocar a querySelector.

Agregando una opción

La forma más básica de agregar un elemento a la lista desplegable es invocando a la función appendChild del select, pasando un elemento de tipo option creada con document.createElement:

const opcion = Object.assign(document.createElement("option"), {
    value: "valor",
    text: "Texto mostrado",
});

Lo que hace Object.assign es asignar las propiedades value y text al option de manera simplificada. También podríamos tener lo siguiente:

const opcion = document.createElement("option");
opcion.value = "valor";
opcion.text = "Texto mostrado";

Una vez que tenemos la opción, la agregamos así:

$select.appendChild(opcion);

Diferencia entre value y text

El text es la opción que se muestra al usuario en la lista desplegable. El value es el valor interno que estará seleccionado cuando la opción mostrada con text sea seleccionada.

Esto es útil cuando, por ejemplo, quieres mostrar una lista de usuarios pero al obtener el valor quieres acceder al id.

Llenar select con arreglo de cadena

Ahora que tienes la referencia a la lista desplegable vamos a llenarla con un arreglo de tipo cadena, recorriendo el arreglo e invocando a appendChild por cada elemento:

const nombres = ["Parzibyte", "Terry", "Byleth", "Leon", "Shovel Knight"];
for (const nombre of nombres) {
    const opcion = Object.assign(document.createElement("option"), {
        value: nombre,
        text: nombre,
    });
    $select.appendChild(opcion);
}

Llenar select con JavaScript a partir de arreglo de objetos

En el ejemplo anterior el valor y texto de las opciones eran las mismas. Ahora veamos cómo tener valores distintos a partir de un arreglo de objetos:

const mascotas = [
    { id: 2, nombre: "Grim", edad: 4 },
    { id: 3, nombre: "Maggie", edad: 8 },
    { id: 4, nombre: "Panqué", edad: 5 },
];
for (const mascota of mascotas) {
    const opcion = Object.assign(document.createElement("option"), {
        value: mascota.id,
        text: mascota.nombre,
    });
    $select.appendChild(opcion);
}

El código es muy parecido, pero ahora el value y text son distintos.

Opción seleccionada

Independientemente de cómo hayas llenado el select, veamos cómo obtener la opción seleccionada. Para ello usamos el siguiente código de JavaScript:

const indice = $select.selectedIndex;
if (indice === -1) return; // Esto es cuando no hay elementos
const opcionSeleccionada = $select.options[indice];
console.log(`Texto: ${opcionSeleccionada.text}. Valor: ${opcionSeleccionada.value}`);

Poniendo todo junto

He colocado 2 ejemplos que puedes probar ya mismo. Para ello accede al siguiente enlace y abre la consola de depuración; al hacer clic en el botón se mostrará la opción seleccionada:

• https://parzibyte.github.io/ejemplos-javascript/llenar-select-arreglo/objetos.html
• https://parzibyte.github.io/ejemplos-javascript/llenar-select-arreglo/cadenas.html

También puedes acceder al código completo en el siguiente repositorio de GitHub: https://github.com/parzibyte/ejemplos-javascript/tree/master/llenar-select-arreglo

Actualización: ya puedes ver el tutorial para llenar un select con PHP y JavaScript usando AJAX.