Modificarea opțiunii selectate dintr-o listă în JavaScript

În lecția anterioară am învățat cum să obținem opțiunea selectată dintr-o listă. Să modificăm acum opțiunea selectată folosind JavaScript.

Pentru aceasta, în proprietatea value a listei select vom scrie valoarea atributului value al acelei opțiuni option pe care dorim să o selectăm.

Să presupunem că avem următoarea listă select:

html<select id="select">
  <option value="one">unu</option>
  <option value="two" selected>doi</option>
  <option value="three">trei</option>
</select>

Să presupunem că avem și un buton:

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

Obținem referințele către listă și buton în variabile:

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

Și acum să facem ca la click pe buton lista noastră să schimbe selecția:

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