Número de opción seleccionada en lista desplegable

En los elementos select existe una propiedad especial selectedIndex, que almacena el número de la opción de la lista que está actualmente seleccionada. La numeración comienza desde cero. Esta propiedad se puede tanto leer como escribir, cambiando la opción seleccionada de la lista.

Veamos el trabajo con esta propiedad con un ejemplo. Supongamos que tenemos la siguiente lista desplegable:

html<select id="select">
  <option value="one">uno</option>
  <option value="two" selected>dos</option>
  <option value="three">tres</option>
</select>

Mostremos el número de la opción seleccionada en la lista:

javascriptlet select = document.querySelector('#select');
console.log(select.selectedIndex); // mostrará 1

Y ahora seleccionemos alguna otra opción:

javascriptlet select = document.querySelector('#select');
select.selectedIndex = 2; // seleccionará 'tres'