SELFHTML

options

Informationsseite

nach unten options: Allgemeines zur Verwendung
nach unten Neue Elemente in Auswahlliste einfügen
nach unten Elemente aus Auswahlliste löschen

Eigenschaften:

nach unten defaultSelected (voreingestellte Auswahl)
nach unten length (Anzahl der Auswahlmöglichkeiten)
nach unten selected (aktuelle Auswahl)
nach unten selectedIndex (Index der aktuellen Auswahl)
nach unten text (Auswahltext)
nach unten value (Auswahlwert)

 nach unten 

option: Allgemeines zur Verwendung

Mit dem Objekt options, das in der JavaScript-Objekthierarchie unterhalb des Seite elements-Objekts liegt, haben Sie Zugriff auf Seite Auswahllisten innerhalb eines Formulars. Sie können dabei auf jede einzelne Auswahlmöglichkeit der Auswahlliste zugreifen.

Es stehen folgende Arten zur Verfügung, mit JavaScript auf die Optionen einer Auswahlliste zuzugreifen:

Schema 1 / Beispiel 1:

document.forms[#].elements[#].options[#].Eigenschaft
document.forms[#].elements[#].Eigenschaft

document.forms[0].elements[0].options[4].text = "Unsinn";
document.forms[0].elements[0].selectedIndex = 2;

Schema 2 / Beispiel 2:

document.Formularname.Elementname.options[#].Eigenschaft
document.Formularname.Elementname.Eigenschaft

document.Testformular.Auswahl.options[4].text = "Unsinn";
document.Testformular.Auswahl.selectedIndex = 2;

Schema 3 / Beispiel 3:

document.forms.Formularname.elements.Elementname.options[#].Eigenschaft
document.forms.Formularname.elements.Elementname.Eigenschaft

document.forms.Testformular.elements.Auswahl.options[4].text = "Unsinn";
document.forms.Testformular.elements.Auswahl.selectedIndex = 2;

Schema 4 / Beispiel 4:

document.forms["Formularname"].elements["Elementname"].options[#].Eigenschaft
document.forms["Formularname"].elements["Elementname"].Eigenschaft

document.forms["Testformular"].elements["Auswahl"].options[4].text = "Unsinn";
document.forms["Testformular"].elements["Auswahl"].selectedIndex = 2;

Erläuterung:

Auswahllisten sind ganz normale Formularelemente. Auswahllisten sprechen Sie also an wie andere Formularelemente auch:

Das options-Objekt ist ein Array, der die Optionen der Auswahlliste enthält. Er hat selbst besitzt die Eigenschaft nach unten length. Über options gefolgt von einer Indexnummer können Sie die einzelnen die Auswahlmöglichkeiten ansprechen. Die erste Auswahloption der Liste hat die Indexnummer 0, die zweite die Indexnummer 1 usw. Die so angesprochenen Auswahloptionen besitzen die Eigenschaften nach unten selected, nach unten defaultSelected, nach unten text und nach unten value. Die Eigenschaft nach unten selectedIndex hingegen hängt wie auch option direkt an dem Objekt, das die Auswahlliste repräsentiert.

Bei den Beispielen auf dieser Seite wird jeweils gezeigt, wie Sie durch das Zusammenspiel des elements und des options-Objekts Auswahllisten mit JavaScript verarbeiten können.

Beachten Sie:

Gemäß dem HTML-spezifischen DOM greift z.B. document.forms.Formularname.elements.Auswahllistenname auf das select-Elementobjekt der Auswahlliste zu. Neben den hier beschriebenen Eigenschaften können Sie auf diese Art weitere Eigenschaften und Methoden nutzen, die in der Referenz zum Seite select-Elementobjekt aufgelistet sind. Die Einträge des options-Arrays sind dementsprechend Seite option-Elementobjekte mit weiteren Eigenschaften.

nach obennach unten

JavaScript 1.0Netscape 2.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Neue Elemente in Auswahlliste einfügen

Sie können innerhalb eines JavaScripts neue Elemente zu einer Auswahlliste hinzufügen oder vorhandene Einträge durch neue ersetzen. Dazu müssen Sie mit Hilfe von JavaScript ein neues option-Objekt erzeugen und es einer Auswahlliste zuordnen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Hinzufuegen () {
  NeuerEintrag = new Option(document.Testform.neu.value, document.Testform.neu.value, false, true);
  document.Testform.Auswahl.options[document.Testform.Auswahl.length] = NeuerEintrag;
  document.Testform.neu.value = "";
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Ein Eintrag</option>
</select>
<br>
<input type="text" name="neu">
<input type="button" value="Hinzu" onclick="Hinzufuegen()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular definiert, das eine Auswahlliste mit einem Eintrag, ein Eingabefeld und einen Button enthält. In dem Eingabefeld kann der Anwender Einträge eingeben, die er der Auswahlliste hinzufügen möchte. Beim Klick auf den Button wird der eingegebene Wert als Eintrag in die Auswahlliste übernommen.

Dazu wird die Funktion Hinzufuegen() aufgerufen, die im Dateikopf notiert ist. Mit der ersten Anweisung in dieser Funktion wird mit new Option ein neues option-Objekt erzeugt. Als Parameter wird unter anderem der Text übergeben, der bei dem neuen Listeneintrag angezeigt werden soll. Im Beispiel ist das der Wert des Eingabefeldes, das der Anwender ausgefüllt hat (document.Testform.neu.value). Anschließend müssen Sie angeben, an welcher Stelle in der Auswahlliste der neu erzeugte Eintrag eingefügt werden soll. Im obigen Beispiel soll der neue Eintrag jeweils ans Ende der Liste angehängt werden. Dazu wird der neue Eintrag einer Indexnummer der Auswahlliste zugeordnet, die mit der Eigenschaft nach unten length ermittelt wird. Diese Syntax können Sie stets benutzen, um Listeneinträge ans Ende einer Liste einzufügen. Doch angenommen, im obigen Beispiel wollten Sie den ersten Eintrag der Liste mit dem neuen Eintrag überschreiben. Dann müsste innerhalb der Funktion Hinzufuegen() dieser Befehl:
document.Testform.Auswahl.options[document.Testform.Auswahl.length] = NeuerEintrag;
wie folgt lauten:
document.Testform.Auswahl.options[0] = NeuerEintrag;
Durch Angabe einer Indexnummer, die in der Liste schon vorkommt, überschreiben Sie also einen Eintrag.

new Option() kennt vier Parameter von denen die drei letzten Parameter optional sind.
1. text = angezeigter Text in der Liste
2. value = zu übertragender Wert der Liste (optional)
3. defaultSelected = true übergeben, wenn der Eintrag der defaultmäßig vorselektierte Eintrag sein soll, sonst false (optional)
4. selected = true übergeben, wenn der Eintrag selektiert werden soll (optional)
Opera 5.12 interpretiert die beiden letzten Parameter und Netscape 6.1 den letzten Parameter nicht.

Beachten Sie:

Im Internet Explorer 5.0 können Sie nicht fensterübergreifend eine Auswahlliste ändern. Der Browser reagiert darauf mit einer Fehlermeldung bzw. mit einem Absturz. Notieren Sie deshalb die ändernde Funktion immer im gleichen Dokument wie die Liste und rufen Sie die Funktion gegebenenfalls fensterübergreifend auf.

Im HTML-spezifischen DOM ist das Hinzufügen von Elementen in die Auswahlliste mithilfe der add()-Methode des Seite select-Elementobjekts (Beispiel siehe dort) vorgesehen. Die hier beschrieben Methode wird allerdings zuverlässiger unterstützt.

nach obennach unten

JavaScript 1.0Netscape 2.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Elemente aus Auswahlliste löschen

Elemente können Sie löschen, indem Sie Ihnen den Wert null zuordnen. Alternativ ist es auch möglich, dem Option-Array eine neue Länge zuzuweisen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Loeschen () {
  document.Testform.Auswahl.options[document.Testform.Auswahl.length - 1] = null;
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Auswahl 1</option>
<option>Auswahl 2</option>
<option>Auswahl 3</option>
<option>Auswahl 4</option>
<option>Auswahl 5</option>
</select>
<br>
<input type="button" value="L&ouml;schen" onclick="Loeschen()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste mit einem Button. Beim Anklicken des Buttons wird der jeweils letzte Eintrag aus der Auswahlliste gelöscht. Dazu wird die Funktion Loeschen() aufgerufen. Die erste Anweisung in der Funktion löscht einen Listeneintrag. Zum Löschen eines Eintrags geben Sie die Indexnummer des zu löschenden Eintrags an. Im Beispiel wird dabei document.Testform.Auswahl.length - 1 angegeben - das ist die Indexnummer des jeweils letzten Eintrags. Genausogut können Sie aber auch 0 angeben, um den ersten Listeneintrag zu löschen, 1, um den zweiten zu löschen usw. Der Löschvorgang kommt zustande, indem Sie dem Listeneintrag den Wert null zuweisen.

Beachten Sie:

Im HTML-spezifischen DOM für das Löschen von Elementen aus einer Auswahlliste die remove()-Methode des Seite select-Elementobjekts vorgesehen. Die hier beschrieben Methode wird allerdings zuverlässiger unterstützt.

nach obennach unten

DOM 1.0JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern defaultSelected

Speichert, ob bzw. dass eine Auswahlmöglichkeit vorausgewählt ist. Mögliche Werte sind true oder false.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function AuswahlReset () {
  for (i = 0; i < document.Testform.Auswahl.length; i++)
    if (document.Testform.Auswahl.options[i].defaultSelected == true)
      document.Testform.Auswahl.options[i].selected = true;
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Augsburg</option>
<option>Berlin</option>
<option>Chemnitz</option>
<option>Dortmund</option>
<option selected>Essen</option>
<option>Frankfurt</option>
<option>Giessen</option>
<option>Hamburg</option>
</select>
<br>
<input type="button" value="Auswahl Reset" onclick="AuswahlReset()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste und einem Button. Bei der Auswahlliste wird bei der HTML-Definition ein Eintrag mit selected als Vorauswahl eingestellt. Der Anwender kann natürlich einen anderen Eintrag auswählen. Wenn er jedoch auf den Button mit der Aufschrift "Auswahl Reset" klickt, wird der Originalzustand wiederhergestellt. Dazu wird beim Anklicken des Buttons die Funktion AuswahlReset() aufgerufen. Diese Funktion ermittelt in einer Seite for-Schleife für alle Auswahlmöglichkeiten der Auswahlliste, ob es sich um die Vorauswahl handelt (if(document.Testform.Auswahl.options[i].defaultSelected == true)). Denn die Vorauswahl ist zu diesem Zeitpunkt durchaus noch gespeichert, auch wenn der Anwender mittlerweile einen anderen Eintrag ausgewählt hat. Wenn die voreingestellte Auswahl gefunden ist, wird die aktuelle Auswahl auf den Indexwert der Vorauswahl gesetzt (document.Testform.Auswahl.options[i].selected = true). Dadurch wird der Originalzustand wiederhergestellt.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen length

Speichert die Anzahl der Einträge einer Auswahlliste. Sie können die Anzahl der Einträge sowohl mit document.Formularname.Listenname.length als auch mit document.Formularname.Listenname.options.length bestimmen. Beide Angaben enthalten die gleichen Werte.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Augsburg</option>
<option>Berlin</option>
<option>Chemnitz</option>
<option>Dortmund</option>
<option>Essen</option>
<option>Frankfurt</option>
<option>Giessen</option>
<option>Hamburg</option>
</select>
</form>
<script type="text/javascript">
document.write("Waehlen Sie einen der " + document.Testform.Auswahl.length + " Eintraege aus");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. Unterhalb des Formulars ist ein Script-Bereich notiert. Unterhalb deshalb, weil die Anweisung in diesem Bereich sofort beim Einlesen der Datei ausgeführt wird und das Formular zu diesem Zeitpunkt bereits bekannt sein muss. Mit Seite document.write() wird dynamisch die Anzahl der Auswahlmöglichkeiten der Auswahlliste in die Datei geschrieben.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern selected

Speichert, ob oder dass ein bestimmter Eintrag einer Auswahlliste selektiert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  if (document.Testform.Auswahl.options[2].selected == true) {
    alert("Diese Auswahl gilt nicht");
    return false;
  }
  return true;
}
</script>
</head><body>
<form name="Testform" onsubmit="return CheckAuswahl()" action="">
<select name="Auswahl" size="5">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
<br>
<input type="submit">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste und einem Submit-Button zum Absenden des Formulars. Beim Absenden wird jedoch über den Event-Handler onsubmit im einleitenden <form>-Tag die Funktion CheckAuswahl() aufgerufen. Das Formular wird nur abgeschickt, wenn diese Funktion den Wert true zurückgibt. Die Funktion überprüft, ob der Anwender etwa auf die Idee gekommen ist, den Eintrag mit der Indexnummer 2 (Guildo Horn) auszuwählen. In diesem Fall wird eine Meldung ausgegeben und es wird false zurückgegeben, wodurch das Formular nicht abgeschickt wird. Der Anwender kann eine neue Auswahl treffen.

Beachten Sie:

Die Eigenschaft selected unterscheidet sich von nach unten selectedIndex durch die Adressierung des gewünschten Listeneintrags. Ansonsten haben beide Eigenschaften die gleiche Aufgabe.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern selectedIndex

Speichert, ob oder dass ein bestimmter Eintrag einer Auswahlliste selektiert ist. Wenn nichts ausgewählt ist, dann ist in der Eigenschaft der Wert -1 gespeichert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  if (document.Testform.Auswahl.selectedIndex == 2)
    document.Testform.Auswahl.selectedIndex = 0;
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onchange="CheckAuswahl()">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. Im einleitenden <select>-Tag ist der Event-Handler onchange notiert. Dadurch wird jedesmal, wenn der Anwender eine Auswahl in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion überprüft, ob der Anwender etwa den Eintrag mit der Indexnummer 2 ausgewählt hat (Guildo Horn). Wenn ja, wählt die Funktion selbständig den Eintrag mit der Indexnummer 0 aus (Goethe). Das heißt, hinterher steht der Auswahlbalken auf diesem Eintrag. Der Anwender kann natürlich eine neue Auswahl treffen.

Beachten Sie:

Die Eigenschaft selectedIndex unterscheidet sich von nach oben selected durch die Adressierung des gewünschten Listeneintrags. Ansonsten haben beide Eigenschaften die gleiche Aufgabe.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern text

Speichert den angezeigten Text eines Eintrags in einer Auswahlliste.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  if (document.Testform.Auswahl.selectedIndex == 2)
    document.Testform.Auswahl.options[2].text = "Thomas Mann";
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onchange="CheckAuswahl()">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. Im einleitenden <select>-Tag ist der Event-Handler onchange notiert. Dadurch wird jedesmal, wenn der Anwender eine Auswahl in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion überprüft, ob der Anwender etwa den Eintrag mit der Indexnummer 2 ausgewählt hat (Guildo Horn). Wenn ja, ändert die Funktion den angezeigten Text dieses Eintrags gemeinerweise auf "Thomas Mann". Die Auswahlmöglichkeit bleibt selektiert.

Beachten Sie:

Das Ändern der Objekteigenschaft text - so wie im obigen Beispiel - ist erst seit JavaScript 1.1 möglich (Netscape 3.x, Internet Explorer 4.x). Das Auslesen dagegen wie ausgezeichnet seit JavaScript 1.0. Auch im HTML-spezifischen DOM ist text als nur lesbar definiert.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen value

Speichert den internen Absendewert eines Eintrags in einer Auswahlliste.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  for (i = 0; i < document.Testform.Auswahl.length; ++i)
    if (document.Testform.Auswahl.options[i].selected == true)
      alert(document.Testform.Auswahl.options[i].value);
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onchange="CheckAuswahl()">
<option value="Idiot!">Blindauswahl 1</option>
<option value="Dummkopf!">Blindauswahl 2</option>
<option value="Bratze!">Blindauswahl 3</option>
<option value="Schlampe!">Blindauswahl 4</option>
<option value="Bingo - gewonnen!">Blindauswahl 5</option>
</select>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. In den einzelnen <option>-Tags sind im Attribut value interne Absendewerte notiert. Im einleitenden <select>-Tag ist außerdem der Event-Handler onchange notiert. Dadurch wird jedesmal, wenn der Anwender eine Auswahl in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion ermittelt in einer Seite for-Schleife für alle Auswahlmöglichkeiten der Auswahlliste, ob die jeweilige Auswahl selektiert wurde. Wenn ja, wird der interne Absendewert der Auswahlmöglichkeit in einem Meldungsfenster ausgegeben.

 nach oben
weiter Seite images
zurück Seite elements
 

© 2005 Seite Impressum