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:

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

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

Otteniamo i riferimenti alla select e al pulsante in variabili:

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

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