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:

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

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

Saadaan viittaukset selectiin ja painikkeeseen muuttujiin:

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

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

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

Jos listallamme ei ole value-attribuuttja, select-elementin value-ominaisuuteen täytyy kirjoittaa sen option:in teksti, jonka haluamme valita.

Tee pudotusvalikko kuukausien nimillä. Tee niin, että JavaScript oletusarvoisesti valitsee tässä listassa nykyisen kuukauden.