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

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

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

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

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

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

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

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