Selector selected
De selector :selected selecteert elementen
die geselecteerd zijn, dat wil zeggen, die het attribuut
selected hebben.
De selector :selected werkt voor elementen met de tag
option. Hij
werkt niet met checkboxes
(checkbox) of
radioknoppen
(radio),
gebruik voor hen de selector
checked.
Omdat :selected niet tot de CSS-specificatie behoort,
is het voor betere prestaties in moderne
browsers beter om eerst de elementen te
filteren met een pure css-selector, en dan
.filter(':selected') toe te passen.
Syntaxis
Zo selecteren we elementen met het
attribuut selected:
$(':selected');
Voorbeeld
Laten we, bij elke selectie van een optie in de vervolgkeuzelijst,
deze onder de lijst weergeven in de kleur
groen. Zoals je ziet, worden voor je eerste klik
de standaard geselecteerde opties weergegeven,
dit zijn 'bbb' en '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');
