Seletor selected
O seletor :selected seleciona elementos
que estão selecionados, ou seja, aqueles que possuem o atributo
selected.
O seletor :selected funciona para elementos com a tag
option. Ele
não funciona com caixas de seleção
(checkbox) ou
botões de rádio
(radio),
para eles use o seletor
checked.
Como :selected não pertence à especificação CSS,
para melhorar o desempenho em navegadores
modernos é melhor primeiro filtrar os elementos
usando um seletor CSS puro, e depois
aplicar .filter(':selected').
Sintaxe
Assim selecionamos elementos com
o atributo selected:
$(':selected');
Exemplo
Vamos, a cada seleção de item na lista
suspensa, exibi-lo abaixo da lista na cor
verde. Como você pode ver, antes do seu primeiro clique
serão exibidos os itens selecionados por padrão,
que são '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');
