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:

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

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

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

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

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

Hvis listen vår ikke har value-attributter, må vi skrive teksten til option-taggen vi ønsker å velge, inn i value-egenskapen til select-elementet.

Lag en nedtrekksliste med navn på måneder. Gjør slik at JavaScript som standard velger gjeldende måned i denne listen.