Um den Wert der ausgewählten <option> zu ermitteln, muss zuerst die Index-Nummer derselben erfragt werden.
Dazu ermittelt man die Eigenschaft selectedIndex des <select>-Elementes:
 |
|
|
|
document.FormularName.SelectName.selectedIndex
|
|
|
|
|
Rückgabewert ist dabei die Position der ausgewählten <option>, wobei bei 0 zu zählen begonnen wird.
Ist keine <option> ausgewählt, ist der Rückgabewert -1.
Um nun an den Inhalt der ausgewählten <option> zu gelangen, muss man die Eigenschaften text bzw. value derselben ermitteln:
Beispiel
Auswahl in Dropdown-Liste ermitteln
Quelltext der Datei
|
|
|
|
<html>
<head>
<title>Auswahl in Dropdown-Liste ermitteln</title>
<script type="text/javascript">
<!--
function andereFarbe(obj)
{
alert( "Du hast "+obj.options[obj.selectedIndex].text+
" ausgewählt!nDer Hexadezimalwert dieser Farbe istn#"+
obj.options[obj.selectedIndex].value);
if(document.getElementsByTagName)
{
document.getElementsByTagName('body')[0].style.backgroundColor=
'#'+obj.options[obj.selectedIndex].value;
}
else if(document.all)
{
document.body.style.backgroundColor=
'#'+obj.options[obj.selectedIndex].value;
}
}
//-->
</script>
</head>
<body>
<h1>Wähle eine Farbe</h1>
<form>
<select onchange="andereFarbe(this)">
<option value="808080">Grau</option>
<option value="FF0000">Rot</option>
<option value="0000FF">Blau</option>
<option value="000000">Schwarz</option>
</select>
</form>
</body>
</html>
|
|
|
|
|
Erläuterung:
Die Seite enthält eine Auswahliste mit 5 Farbnamen. Als value-Attribut enthalten die entprechenden <option>'s den Hexadezimalwert dieser Farben.
Beim dem onchange- Event dieser Liste, welcher eintritt, sobald sich die Auswahl innerhalb der Liste ändert, wird die Funktion andereFarbe() aufgerufen.
Als Parameter wird beim Funktionsaufruf über das Schlüsselwort this die Liste als sogenanntes "Objekt" übergeben, wodurch alle Eigenschaften der Liste in der Funktion direkt verfügbar sind.
Innerhalb der Funktion wird eine Meldung über die Auswahl ausgegeben, wobei man dort über
|
|
|
|
obj.options[obj.selectedIndex].text
|
|
|
|
|
den angezeigten Text, und mit
|
|
|
|
obj.options[obj.selectedIndex].value
|
|
|
|
|
den in value angegebenen Wert der Option ermittelt.
In Browsern, welche das DHTML-Zugriffsmodell nach DOM-bzw. Microsoft-Syntax beherrschen, wird zusätzlich die Hintergrundfarbe
des <body> auf den ausgewählten Wert geändert.
|
