Trabajo con listas desplegables en JavaScript

En esta lección estudiaremos el trabajo con la etiqueta select, que representa una lista desplegable. Si no sabes trabajar con esta etiqueta en HTML, primero estudia su estructura en el manual en este enlace: select.

Veamos cómo trabajar con esta etiqueta a través de JavaScript. Supongamos que tenemos la siguiente lista desplegable:

<select id="select">
	<option>one</option>
	<option selected>two</option>
	<option>three</option>
</select>

Obtengamos una referencia al select en una variable:

let select = document.querySelector('#select');

Ahora, al cambiar el select, mostremos en pantalla el texto de la opción seleccionada. Para esto necesitamos leer la propiedad value de nuestro select:

select.addEventListener('change', function(){
	console.log(this.value);
});

Dado un select, un párrafo y un botón. Al hacer clic en el botón muestra el texto de la opción seleccionada en el párrafo.

Crea una lista desplegable de años desde 2020 hasta 2030. Al seleccionar alguna opción de la lista, muestra un mensaje sobre si ese año es bisiesto o no.