Selektor selected

Selektor :selected vybírá prvky, které jsou vybrány, tedy ty, které mají atribut selected. Selektor :selected funguje pro prvky s tagem option. Nefunguje s zaškrtávacími políčky (checkbox) nebo přepínači (radio), pro ně použijte selektor checked. Protože :selected nepatří do CSS specifikace, pro zlepšení výkonu v moderních prohlížečích je lepší nejprve filtrovat prvky s použitím čistého css-selektoru, a poté použít .filter(':selected').

Syntaxe

Takto vybíráme prvky s atributem selected:

javascript$(':selected');

Příklad

Pojďme při každém výběru položky v rozbalovacím seznamu zobrazit jej pod seznamem zelenou barvou. Jak vidíte, před vaším prvním kliknutím budou zobrazeny položky vybrané ve výchozím nastavení, to jsou 'bbb' a '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');

Viz také