Selected selector

Selectoren :selected vælger elementer, som er valgt, det vil sige dem, som har attributten selected. Selectoren :selected fungerer for elementer med tagget option. Den fungerer ikke med checkbokse (checkbox) eller radio knapper (radio), for dem skal du bruge selectoren checked. Da :selected ikke hører til CSS-specifikationen, er det for bedre ydeevne i moderne browsere bedre først at filtrere elementerne med brug af ren css-selector, og derefter anvende .filter(':selected').

Syntaks

Sådan vælger vi elementer med attributten selected:

javascript$(':selected');

Eksempel

Lad os ved hvert valg af punkt i dropdown- menuen vise det under menuen i grøn farve. Som du kan se, vil der inden din første klik blive vist punkterne, der er valgt som standard, dette er 'bbb' og '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');

Se også