JavaScript: Name und Wert eines <select> / <option> Elements auslesen

Um mit JavaScript interaktive Webseiten zu gestalten, kommt es hin und wieder vor, die Eingaben eines Drop-Down Menüs auszulesen. Diese <select> Menüs enthalten mehrere Werte, die untereinander in einem ausklappbaren Menü angezeigt werden. Mit JavaScript kann man dabei aber nicht nur auf den Wert, sondern auch auf den Namen des ausgewählten <option> Eintrags zugreifen und diesen weiter verwenden!

 
So sieht es aus:

EinsZweiDreiVierFünf

 
Wichtig ist, dass das <select> Element eine eindeutige ID besitzt – in unserem Beispiel “selectmenue”. Über “document.getElementById(‘selectmenue’)” lässt sich dann auf das <select> Element der Seite zugreifen und über element.options[element.selectedIndex] sowohl der Wert (“value”) als auch der angezeigte Name (“text”) des ausgewählten Elements anzeigen.

 
Der komplette Code dazu:

<select id="selectmenue" onchange="wertauslesen()">
  <option value="1">Eins</option>
  <option value="2">Zwei</option>
  <option value="3">Drei</option>
  <option value="4">Vier</option>
  <option value="5">Fünf</option>
</select>

<script type="text/javascript">
function wertauslesen() {
    var element = document.getElementById('selectmenue');
    var name = element.options[element.selectedIndex].text;
    var wert = element.options[element.selectedIndex].value;
    alert('Wert: '+wert+' - Name: '+name);
}
</script>