Cambiar el elemento seleccionado de una lista en JavaScript
En la lección anterior aprendimos a obtener el elemento seleccionado de una lista. Ahora vamos a cambiar el elemento seleccionado usando JavaScript.
Para ello, asignaremos a la propiedad value del select
el valor del atributo value de aquel
option que queremos seleccionar.
Supongamos que tenemos el siguiente select:
<select id="select">
<option value="one">uno</option>
<option value="two" selected>dos</option>
<option value="three">tres</option>
</select>
Supongamos también que hay un botón:
<input type="submit" id="button">
Obtengamos referencias al select y al botón en variables:
let select = document.querySelector('#select');
let button = document.querySelector('#button');
Y ahora hagamos que al hacer clic en el botón nuestro select cambie la selección:
button.addEventListener('click', function() {
select.value = 'one';
});
Si nuestra lista no tiene atributos value,
entonces en la propiedad value del select
debemos asignar el texto de la etiqueta option que
queremos seleccionar.
Crea una lista desplegable con los nombres de los meses. Haz que JavaScript por defecto seleccione en esta lista el mes actual.