SELFHTML: JavaScript / Objektreferenz / options
Description: (SELFHTML 7.0) Das JavaScript-Objekt options
Keywords: SELFHTML, JavaScript, Objekt, options-Objekt

SELFHTML/Quickbar JavaScript Objektreferenz

| ## options
| options: Allgemeines zur Verwendung Neue Elemente in Auswahlliste einfügen Elemente aus Auswahlliste löschen Eigenschaften: defaultSelected (voreingestellte Auswahl) length (Anzahl der Auswahlmöglichkeiten) selected (aktuelle Auswahl) selectedIndex (Index der aktuellen Auswahl) text (Auswahltext) value (Auswahlwert)

## option: Allgemeines zur Verwendung

Mit dem Objekt `options`, das in der JavaScript-Objekthierarchie unterhalb des elements-Objekts liegt, haben Sie Zugriff auf 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.options.Eigenschaft

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

### Erläuterung:

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

- mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
  Bei Verwendung von Indexnummern geben Sie `document.forms` an und dahinter in eckigen Klammern, das wievielte Formular in der Datei Sie meinen. Beachten Sie, daß der Zähler bei 0 beginnt, d.h. das erste Formular sprechen Sie mit `forms[0]` an, das zweite Formular mit `forms[1]` usw. Beim Zählen gilt die Reihenfolge, in der die `<form>`-Tags in der Datei notiert sind. Dann folgt die Angabe `elements`. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Auch dabei wird wieder bei 0 zu zählen begonnen, d.h. das erste Element innerhalb eines Formulars hat die Indexnummer 0, das zweite die Indexnummer 1 usw. Sie müssen dabei die Indexnummer der gewünschten Auswahlliste ermitteln.
- mit Namen (wie in Schema 2 / Beispiel 2)
  Dabei geben Sie mit `document.FormularName.ElementName` den Namen des Formulars und der Auswahlliste an, den Sie in HTML mit `<form name=>` und `<select name=>` vergeben.

Hinzu kommt bei Auswahllisten in einigen Fällen die Angabe `options` für einzelne Auswahlmöglichkeiten der Auswahlliste. Es gibt Objekteigenschaften von `options`, bei denen Sie diese Angabe, gefolgt von einer Indexnummer der gewünschten Auswahloption angeben müssen. Die erste Auswahlmöglichkeit der Liste hat die Indexnummer 0, die zweite die Indexnummer 1 usw. Andere Objekteigenschaften benötigen keine Angabe von `options`. Bei den Beispielen auf dieser Seite wird jeweils gezeigt, wie Sie eine Eigenschaft des `options`-Objekts genau ansprechen.

## 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:

    <html><head><title>Test</title>
    <script language="JavaScript">
    function Hinzufuegen()
    {
     NeuerEintrag = new Option(document.Testform.neu.value);
     document.Testform.Auswahl.options[document.Testform.Auswahl.length] = NeuerEintrag;
     document.Testform.neu.value = "";
    }
    </script>
    </head><body>
    <form name="Testform">
    <select name="Auswahl" size=8>
    <option>Ein Eintrag
    </select>
    <br>
    <input 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 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 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üßte 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.

## Elemente aus Auswahlliste löschen

Dies wird nur von Netscape unterstützt, beim MS Internet Explorer war das Verhalten nicht nachvollziehbar.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    function Loeschen()
    {
     document.Testform.Auswahl.options[document.Testform.Auswahl.length-1] = null;
     history.go(0);
    }
    </script>
    </head><body>
    <form name="Testform">
    <select name="Auswahl" size=8>
    <option>Auswahl 1
    <option>Auswahl 2
    <option>Auswahl 3
    <option>Auswahl 4
    <option>Auswahl 5
    </select>
    <br>
    <input type=button value="Loeschen" 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. Anschließend müssen Sie noch eine Art Reload durchführen, damit die Anzeige aktualisiert wird. Das können Sie durch den Befehl `history.go(0)` erreichen.

## defaultSelected

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

### Beispiel:

    <html><head><title>Test</title>
    <script language="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">
    <select name="Auswahl" size=8>
    <option>Augsburg
    <option>Berlin
    <option>Chemnitz
    <option>Dortmund
    <option selected>Essen
    <option>Frankfurt
    <option>Giessen
    <option>Hamburg
    </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 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.

## length

Speichert die Anzahl der Einträge einer Auswahlliste

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <form name="Testform">
    <select name="Auswahl" size=8>
    <option>Augsburg
    <option>Berlin
    <option>Chemnitz
    <option>Dortmund
    <option>Essen
    <option>Frankfurt
    <option>Giessen
    <option>Hamburg
    </select>
    </form>
    <script language="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 Scriptbereich 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 muß. Mit document.write() wird dynamisch die Anzahl der Auswahlmöglichkeiten der Auswahlliste in die Datei geschrieben.

## selected

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

### Beispiel:

    <html><head><title>Test</title>
    <script language="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()">
    <select name="Auswahl" size=5>
    <option>Goethe
    <option>Schiller
    <option>Guildo Horn
    <option>Homer
    <option>Fontane
    </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 selectedIndex durch die Adressierung des gewünschten Listeneintrags. Ansonsten haben beide Eigenschaften die gleiche Aufgabe.

## selectedIndex

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

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    function CheckAuswahl()
    {
     if(document.Testform.Auswahl.selectedIndex == 2)
      document.Testform.Auswahl.selectedIndex = 0;
    }
    </script>
    </head><body>
    <form name="Testform">
    <select name="Auswahl" size=5 onChange="CheckAuswahl()">
    <option>Goethe
    <option>Schiller
    <option>Guildo Horn
    <option>Homer
    <option>Fontane
    </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 selected durch die Adressierung des gewünschten Listeneintrags. Ansonsten haben beide Eigenschaften die gleiche Aufgabe.

## text

Speichert den angezeigten Text eines Eintrags in einer Auswahlliste.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    function CheckAuswahl()
    {
     if(document.Testform.Auswahl.selectedIndex == 2)
      document.Testform.Auswahl.options[2].text = "Thomas Mann";
    }
    </script>
    </head><body>
    <form name="Testform">
    <select name="Auswahl" size=5 onChange="CheckAuswahl()">
    <option>Goethe
    <option>Schiller
    <option>Guildo Horn
    <option>Homer
    <option>Fontane
    </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, MS Internet Explorer 4.x). Das Auslesen dagegen wie ausgezeichnet seit JavaScript 1.0.

## value

Speichert den internen Absendewert eines Eintrags in einer Auswahlliste.

### Beispiel:

    <html><head><title>Test</title>
    <script language="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">
    <select name="Auswahl" size=5 onChange="CheckAuswahl()">
    <option value="Idiot!">Blindauswahl 1
    <option value="Dummkopf!">Blindauswahl 2
    <option value="Bratze!">Blindauswahl 3
    <option value="Schlampe!">Blindauswahl 4
    <option value="Bingo - gewonnen!">Blindauswahl 5
    </select>
    </form>
    </body></html>

### Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. In den einzelnen `<option>`-Tags sind mit `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 for-Schleife für alle Auswahlmöglichkeiten der Auswahlliste, ob die jeweilige Auswahl selektiert wurde. Wenn ja, wird der interne Absendewert der Auswahlmöglichkkeit in einem Meldungsfenster ausgegeben.

weiter: | images
zurück: | elements

SELFHTML/Quickbar JavaScript Objekt-Referenz

© 1998 Stefan Münz, muenz@csi.com