jQuery: Ausgewählte Option aus Select-Box auslesen

Manche Dinge sind eigentlich recht einfach, aber man tut sich mit ihnen schwer. So ist es zum Beispiel, wenn es darum geht, den ausgewählten Wert auf einem Select-Feld mit jQuery auszulesen. Nehmen wir an, das Dropdown-Feld sieht wie folgt aus:

<select name="obst" id="obst">
  <option value="1">Orange</option>
  <option value="2">Apfel</option>
  <option value="3">Banane</option>
</select>

Ausgelesen kann der aktuelle Wert – wie bei jedem anderen Input-Feld auch – mit val():

$('select#obst').val();

Ausgabe des Value-Wertes

Soll aber der Text, anstatt der Value ausgegeben werden, funktioniert die val()-Funktion nicht mehr. Hier kann aber mit dem Selektor :selected gearbeitet werden:

$('select#obst :selected').text();

Ausgabe des Textes vom ausgewählten Listenpunkt

Ein weiteres mögliches Szenario bei der Arbeit mit Select-Boxen ist die Ausgabe von mehreren ausgewählten Optionen:

$('select#obst :selected').each(function(i, option) {
  // Verarbeitung der Optionen
  alert(option.value + ' ' + option.text);
});