Endring av valgt listepunkt i JavaScript

I forrige leksjon lærte vi hvordan vi henter det valgte punktet i en liste. La oss nå endre det valgte punktet ved hjelp av JavaScript.

For å gjøre dette skriver vi verdien til value-attributtet til den option-en vi ønsker å velge, inn i value-egenskapen til select-elementet.

La oss si at vi har følgende select:

html<select id="select">
  <option value="one">en</option>
  <option value="two" selected>to</option>
  <option value="three">tre</option>
</select>

La oss også si at det er en knapp:

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

La oss hente referanser til select og knappen inn i variabler:

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

Og la oss nå gjøre slik at når knappen klikkes, endrer select-elementet valget:

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