Selektor selected
Selektor :selected wybiera elementy,
które są wybrane, czyli te, które mają atrybut
selected.
Selektor :selected działa dla elementów z tagiem
option. On
nie działa z polami wyboru
(checkbox) lub
przyciskami opcji
(radio),
dla nich użyj selektora
checked.
Ponieważ :selected nie należy do specyfikacji CSS,
to dla poprawy wydajności w nowoczesnych
przeglądarkach lepiej na początku odfiltrować elementy z
wykorzystaniem czystego selektora css, a następnie
zastosować .filter(':selected').
Składnia
Tak wybieramy elementy z
atrybutem selected:
$(':selected');
Przykład
Przy każdym wyborze pozycji w rozwijanym
liście, wyświetlajmy ją pod listem zielonym
kolorem. Jak widzicie przed waszym pierwszym kliknięciem
będą wyświetlone pozycje, wybrane domyślnie,
to 'bbb' i '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');
