Selected-selectorn

Selectorn :selected väljer element som är valda, det vill säga de som har attributet selected. Selectorn :selected fungerar för element med taggen option. Den fungerar inte med kryssrutor (checkbox) eller radioknappar (radio), för dem använder du selectorn checked. Eftersom :selected inte tillhör CSS-specifikationen, är det bättre för prestanda i moderna webbläsare att först filtrera element med ren CSS-selector, och sedan tillämpa .filter(':selected').

Syntax

Så här väljer vi element med attributet selected:

javascript$(':selected');

Exempel

Låt oss, vid varje val av punkt i rullgardinsmenyn, visa den under listan i grön färg. Som du ser kommer punkterna som är valda som standard att visas innan ditt första klick, detta är 'bbb' och '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 även