Εργασία με αναπτυσσόμενες λίστες στο JavaScript

Σε αυτό το μάθημα θα μελετήσουμε την εργασία με την ετικέτα select, η οποία αντιπροσωπεύει μια αναπτυσσόμενη λίστα. Εάν δεν ξέρετε πώς να δουλέψετε με αυτήν την ετικέτα σε HTML, τότε αρχικά μελετήστε τη δομή της στον οδηγό σε αυτόν τον σύνδεσμο: select.

Ας δούμε πώς να δουλέψουμε με αυτήν την ετικέτα μέσω JavaScript. Ας υποθέσουμε ότι μας δίνεται μια τέτοια αναπτυσσόμενη λίστα:

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

Ας πάρουμε μια αναφορά στο select σε μια μεταβλητή:

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

Ας τώρα, όταν αλλάξει το select, να εμφανίσουμε στην οθόνη το κείμενο της επιλεγμένης επιλογής της λίστας. Για αυτό πρέπει να διαβάσουμε την ιδιότητα value του select μας:

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

Δίνεται ένα select, μια παράγραφος και ένα κουμπί. Με κλικ στο κουμπί εμφανίστε το κείμενο της επιλεγμένης επιλογής της λίστας στην παράγραφο.

Δημιουργήστε μια αναπτυσσόμενη λίστα ετών από το 2020 μέχρι το 2030. Όταν επιλεγεί κάποια επιλογή της λίστας, εμφανίστε ένα μήνυμα σχετικά με το αν είναι δίσεκτο αυτό το έτος ή όχι.