Selectorul selected

Selectorul :selected selectează elementele, care sunt selectate, adică cele care au atributul selected. Selectorul :selected funcționează pentru elementele cu tag-ul option. El nu funcționează cu checkbox-urile (checkbox) sau butoanele radio (radio), pentru acestea utilizați selectorul checked. Deoarece :selected nu aparține specificației CSS, pentru a îmbunătăți performanța în browserele moderne este mai bine să filtrați mai întâi elementele cu utilizarea unui selector css pur, iar apoi să aplicați .filter(':selected').

Sintaxă

Așa selectăm elementele cu atributul selected:

javascript$(':selected');

Exemplu

Să afișăm, la fiecare selecție a unui punct în lista derulantă, sub listă cu culoarea verde. După cum vedeți, înainte de prima dvs. click vor fi afișate punctele, selectate implicit, acestea sunt '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');

Vedeți și