Επιλογέας selected
Ο επιλογέας :selected επιλέγει στοιχεία,
που είναι επιλεγμένα, δηλαδή αυτά που έχουν το χαρακτηριστικό
selected.
Ο επιλογέας :selected λειτουργεί για στοιχεία με την ετικέτα
option. Δεν
λειτουργεί με checkboxes
(checkbox) ή
κουμπιά radio
(radio),
για αυτά χρησιμοποιήστε τον επιλογέα
checked.
Εφόσον ο :selected δεν ανήκει στις προδιαγραφές CSS,
για βελτίωση της απόδοσης σε σύγχρονα
προγράμματα περιήγησης είναι καλύτερα στην αρχή να φιλτράρετε τα στοιχεία με
χρήση καθαρού css-επιλογέα, και στη συνέχεια
να εφαρμόσετε .filter(':selected').
Σύνταξη
Έτσι επιλέγουμε στοιχεία με
το χαρακτηριστικό selected:
$(':selected');
Παράδειγμα
Ας, κάθε φορά που επιλέγεται ένα στοιχείο στην αναπτυσσόμενη
λίστα, να το εμφανίζουμε κάτω από τη λίστα με πράσινο
χρώμα. Όπως βλέπετε πριν από το πρώτο σας κλικ
θα εμφανιστούν τα στοιχεία που είναι επιλεγμένα από προεπιλογή,
αυτά είναι 'bbb' και 'ddd':
<select name="texts" multiple="multiple">
<option>aaa</option>
<option selected="selected">bbb</option>
<option>ccc</option>
<option selected="selected">ddd</option>
<option>eee</option>
<option>fff</option>
</select>
<div></div>
div {
color: green;
}
$('select')
.change(function() {
let str = '';
$('select option:selected').each(function() {
str += $(this).text() + ' ';
});
$('div').text(str);
}).trigger('change');