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:

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

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');

Zobacz też