Sélecteur selected
Le sélecteur :selected sélectionne les éléments
qui sont sélectionnés, c'est-à-dire ceux qui ont l'attribut
selected.
Le sélecteur :selected fonctionne pour les éléments avec la balise
option. Il
ne fonctionne pas avec les cases à cocher
(checkbox) ou
les boutons radio
(radio),
pour eux utilisez le sélecteur
checked.
Comme :selected n'appartient pas à la spécification CSS,
pour améliorer les performances dans les navigateurs
modernes, il est préférable de d'abord filtrer les éléments
en utilisant un sélecteur CSS pur, puis
d'appliquer .filter(':selected').
Syntaxe
Ainsi nous sélectionnons les éléments avec
l'attribut selected:
$(':selected');
Exemple
Faisons en sorte qu'à chaque fois qu'un élément de la liste déroulante
est sélectionné, il soit affiché sous la liste en
couleur verte. Comme vous pouvez le voir avant votre premier clic
les éléments sélectionnés par défaut seront affichés,
ce sont 'bbb' et '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');
