Het wijzigen van het geselecteerde lijstitem in JavaScript

In de vorige les hebben we geleerd hoe we het geselecteerde lijstitem kunnen verkrijgen. Laten we nu het geselecteerde item wijzigen met JavaScript.

Om dit te doen, schrijven we de waarde van het value attribuut van de option die we willen selecteren in de value eigenschap van de select.

Stel dat we de volgende select hebben:

<select id="select">
	<option value="one">een</option>
	<option value="two" selected>twee</option>
	<option value="three">drie</option>
</select>

Stel dat we ook een knop hebben:

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

Laten we referenties naar de select en de knop in variabelen zetten:

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

Laten we nu ervoor zorgen dat onze select van selectie verandert wanneer er op de knop wordt geklikt:

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

Als onze lijst geen value attributen heeft, dan moeten we de tekst van de option tag die we willen selecteren, in de value eigenschap van de select schrijven.

Maak een dropdown-lijst met de namen van de maanden. Zorg ervoor dat JavaScript standaard de huidige maand in deze lijst selecteert.