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:

javascript$(':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':

html<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>
cssdiv {
  color: green;
}
javascript$('select')
  .change(function() {
    let str = '';
    
    $('select option:selected').each(function() {
      str += $(this).text() + ' ';
    });
    
    $('div').text(str);
  }).trigger('change');

Veja também

  • método filter,
    que filtra elementos no conjunto pelo seletor especificado
  • atributo selected
  • seletor checked,
    que seleciona elementos que estão marcados, ou seja, aqueles que possuem o atributo checked
    ou selected
  • tags option
    e select