A kiválasztott lista elem megváltoztatása JavaScripttel

Az előző leckében megtanultuk, hogyan kérjük le a lista kiválasztott elemét. Most pedig megváltoztatjuk a kiválasztott elemet JavaScript segítségével.

Ehhez a select value tulajdonságába írjuk annak a option-nak a value attribútum értékét, amelyiket ki szeretnénk választani.

Tegyük fel, hogy a következő selectünk van:

html<select id="select">
  <option value="one">egy</option>
  <option value="two" selected>kettő</option>
  <option value="three">három</option>
</select>

Tegyük fel, hogy van egy gomb is:

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

Kapjuk meg a select és a gomb hivatkozásait változókba:

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

Most pedig tegyük úgy, hogy a gomb megnyomásakor a selectünk megváltoztatja a kiválasztást:

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