Αριθμός επιλεγμένου στοιχείου αναπτυσσόμενης λίστας
Στα select υπάρχει μια ειδική ιδιότητα
selectedIndex, που αποθηκεύει τον αριθμό
του στοιχείου της λίστας που είναι επιλεγμένο αυτήν τη στιγμή.
Η αρίθμηση ξεκινάει από το μηδέν. Αυτή
η ιδιότητα μπορεί τόσο να διαβαστεί,
όσο και να γραφτεί, αλλάζοντας το επιλεγμένο στοιχείο της λίστας.
Ας δούμε τη λειτουργία αυτής της ιδιότητας με ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε την ακόλουθη αναπτυσσόμενη λίστα:
<select id="select">
<option value="one">ένα</option>
<option value="two" selected>δύο</option>
<option value="three">τρία</option>
</select>
Ας εμφανίσουμε τον αριθμό του επιλεγμένου στοιχείου της λίστας:
let select = document.querySelector('#select');
console.log(select.selectedIndex); // θα εμφανίσει 1
Τώρα ας επιλέξουμε κάποιο άλλο στοιχείο:
let select = document.querySelector('#select');
select.selectedIndex = 2; // θα επιλέξει το 'τρία'
Δίνεται ένα input και ένα select. Στο input εισάγεται κάποιος αριθμός. Όταν χάσει το focus, κάντε επιλεγμένο το στοιχείο της λίστας, του οποίου ο αριθμός είναι ίσος με την τιμή από το input.
Δημιουργήστε μια αναπτυσσόμενη λίστα με τα ονόματα των ημερών της εβδομάδας. Κάντε έτσι ώστε μέσω JavaScript να επιλέγεται από προεπιλογή σε αυτήν τη λίστα η τρέχουσα ημέρα.