Selettore selected
Il selettore :selected seleziona gli elementi
che sono selezionati, cioè quelli che hanno l'attributo
selected.
Il selettore :selected funziona per elementi con il tag
option. Esso
non funziona con le caselle di controllo
(checkbox) o
con i pulsanti radio
(radio),
per questi utilizzate il selettore
checked.
Poiché :selected non appartiene alle specifiche CSS,
per migliorare le prestazioni nei browser moderni
è meglio filtrare prima gli elementi
utilizzando un selettore CSS puro, e poi
applicare .filter(':selected').
Sintassi
In questo modo selezioniamo gli elementi con
l'attributo selected:
$(':selected');
Esempio
Ad ogni selezione di un elemento nel menu a tendina,
visualizziamolo sotto la lista in colore verde.
Come potete vedere prima del vostro primo click
saranno visualizzati gli elementi selezionati di default,
cioè 'bbb' e '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');
