Selektor selected

Der Selektor :selected wählt Elemente aus, die ausgewählt sind, also solche, die das Attribut selected haben. Der Selektor :selected funktioniert für Elemente mit dem Tag option. Er funktioniert nicht mit Checkboxen (checkbox) oder Radio-Buttons (radio), für diese verwenden Sie den Selektor checked. Da :selected nicht zur CSS-Spezifikation gehört, ist es für eine bessere Leistung in modernen Browsern besser, zuerst die Elemente mit einem reinen CSS-Selektor zu filtern und dann .filter(':selected') anzuwenden.

Syntax

So wählen wir Elemente mit dem Attribut selected aus:

javascript$(':selected');

Beispiel

Lassen Sie uns bei jeder Auswahl eines Punktes in der Dropdown-Liste diesen unter der Liste in grüner Farbe anzeigen. Wie Sie sehen, werden bis zu Ihrem ersten Klick die standardmäßig ausgewählten Punkte angezeigt, dies sind 'bbb' und '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');

Siehe auch