Manejar evento change en JavaScript

En la clase anterior, vimos cómo escuchar el evento click para ver cuando el usuario hace click en un botón. Ahora vamos a escuchar el evento change para ver cuando el usuario cambia el valor de un select.

Con un HTML como este:

<form class="search-filters">
  <label for="filter-location">Ubicación</label>
  <select id="filter-location">
    <option value="">Todas</option>
    <option value="remoto">Remoto</option>
    <option value="cdmx">Ciudad de México</option>
    <option value="guadalajara">Guadalajara</option>
  </select>
</form>

Podemos escuchar el evento change para ver cuando el usuario cambia el valor de un select.

const filterLocation = document.getElementById('filter-location')

filterLocation.addEventListener('change', function () {
  console.log('Ubicación seleccionada:', filterLocation.value)
})

Ten en cuenta que el valor del select es el valor del option seleccionado… ¡no el nombre de la opción!

Por lo que si el usuario selecciona “Ciudad de México” el valor de la variable filterLocation.value será “cdmx”. Así que no confundas el valor del option con el nombre que ve el usuario.

Nota sobre accesibilidad: Como puedes ver en el ejemplo, el <select> tiene asociado un <label> mediante el atributo for que apunta al id del select. Esto es esencial para la accesibilidad, ya que permite a los lectores de pantalla identificar correctamente el propósito del campo. En los ejemplos de este curso incluimos los labels cuando es relevante para el contexto, pero siempre debes asegurarte de usarlos en producción.

En la próxima clase vamos a ver cómo podemos usarlo para filtrar los resultados de la lista de empleos.