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:

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

Obtengamos una referencia al select en una variable:

javascriptlet 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:

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