Valitun listan kohteen muuttaminen JavaScriptillä

Edellisessä oppitunnissa opimme saamaan valitun listan kohteen. Nyt opimme muuttamaan valittua kohdetta JavaScriptin avulla.

Kirjoita sen option:in value-attribuutin arvo select-elementin value-ominaisuuteen, joka haluamme valita.

Oletetaan, että meillä on seuraava select:

html<select id="select">
  <option value="one">yksi</option>
  <option value="two" selected>kaksi</option>
  <option value="three">kolme</option>
</select>

Oletetaan myös, että on painike:

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

Saadaan viittaukset selectiin ja painikkeeseen muuttujiin:

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

Tehdään nyt niin, että painiketta klikattaessa valintamme muuttuu:

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