Arbeit mit Dropdown-Listen in JavaScript

In dieser Lektion werden wir die Arbeit mit dem Tag select untersuchen, der eine Dropdown-Liste darstellt. Wenn Sie nicht mit diesem Tag in HTML arbeiten können, dann lernen Sie zunächst seine Struktur im Handbuch unter diesem Link: select.

Lassen Sie uns sehen, wie man mit diesem Tag über JavaScript arbeitet. Nehmen wir an, wir haben eine solche Dropdown-Liste:

<select id="select">
	<option>one</option>
	<option selected>two</option>
	<option>three</option>
</select>

Holen wir uns einen Verweis auf die Selectbox in eine Variable:

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

Lassen Sie uns nun bei einer Änderung der Selectbox den Text des ausgewählten Listenpunkts ausgeben. Dazu muss die Eigenschaft value unserer Selectbox ausgelesen werden:

select.addEventListener('change', function(){
	console.log(this.value);
});

Gegeben sind eine Selectbox, ein Absatz und ein Button. Beim Klick auf den Button soll der Text des ausgewählten Listenpunkts in den Absatz ausgegeben werden.

Erstellen Sie eine Dropdown-Liste mit Jahren von 2020 bis 2030. Bei der Auswahl eines Listenelements geben Sie eine Meldung aus, ob es sich um ein Schaltjahr handelt oder nicht.