Modifica dell'elemento selezionato di una lista in JavaScript

Nella lezione precedente abbiamo imparato a ottenere l'elemento selezionato di una lista. Ora impariamo a modificare l'elemento selezionato con JavaScript.

Per fare ciò, assegniamo alla proprietà value della select il valore dell'attributo value dell'elemento option che vogliamo selezionare.

Supponiamo di avere la seguente select:

<select id="select">
	<option value="one">uno</option>
	<option value="two" selected>due</option>
	<option value="three">tre</option>
</select>

Supponiamo anche che ci sia un pulsante:

<input type="submit" id="button">

Otteniamo i riferimenti alla select e al pulsante in variabili:

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

E ora facciamo in modo che quando si clicca sul pulsante la nostra select cambi selezione:

button.addEventListener('click', function() {
	select.value = 'one';
});

Se la nostra lista non ha attributi value, allora nella proprietà value della select è necessario assegnare il testo del tag option che vogliamo selezionare.

Crea un menu a tendina con i nomi dei mesi. Fai in modo che JavaScript per impostazione predefinita selezioni il mese corrente in questo elenco.