A selected szelektor

A :selected szelektor azokat az elemeket választja ki, amelyek ki lettek választva, vagyis amelyek rendelkeznek a selected attribútummal. A :selected szelektor a option tag-gel rendelkező elemekre működik. Nem működik a jelölőnégyzetekkel (checkbox) vagy a rádiógombokkal (radio), ezekhez használd a checked szelektort. Mivel a :selected nem része a CSS specifikációnak, ezért a jobb teljesítmény érdekében a modern böngészőkben érdemes először a tiszta CSS-szelektorral szűrni az elemeket, majd azután alkalmazni a .filter(':selected') metódust.

Szintaxis

Így választjuk ki a selected attribútummal rendelkező elemeket:

javascript$(':selected');

Példa

Minden alkalommal, amikor kiválasztasz egy elemet a legördülő listából, jelenítsd meg a lista alatt zöld színnel. Amint látod, az első kattintásod előtt az alapértelmezés szerint kiválasztott elemek jelennek meg, ezek a 'bbb' és 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');

Lásd még