JavaScript/DOM/Document/forms/elements/options

Mit dem Objekt options haben Sie Zugriff auf Auswahllisten innerhalb eines Formulars. Sie können dabei auf jede einzelne Auswahlmöglichkeit der Auswahlliste zugreifen.

Unterobjekte

• Window
  • document
    • anchors
    • forms
      • elements
        • options
    • images
    • links

Eigenschaften:

• defaultSelected
• length
• selected
• selectedIndex
• text
• value

Verwendung

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

Beispiel

// 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;

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

• mit einer Indexnummer des Formulars und des Elements (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, dass der Zähler bei 0 beginnt, d. h. das erste Formular sprechen Sie mit document.forms[0] an, das zweite Formular mit document.forms[1] usw. Beim Zählen gilt die Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Dann folgt die Angabe .elements zum Zugriff auf das zugehörige elements-Unterobjekt. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Erneut wird 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. Sie können zwischen den eckigen Klammern auch eine Zahl-Variable notieren, die die Indexnummer des Formulars bzw. des Formularelements enthält.

• 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.

• mit dem Namen des Formulars und des Elements direkt über das document-Objekt (wie in Schema 2 / Beispiel 2)
  Wie auch verschiedene andere Elemente mit name-Attributen können Sie Formulare mit Namen als Objekte direkt unterhalb des document-Objekts ansprechen. Dabei geben Sie mit document.Formularname.Elementname den Namen des Formulars und des Elements an, den Sie bei der Definition des Formulars <form name="..."> und der Auswahlliste <select name="..."> angegeben haben.

• mit dem Namen des Formulars und dem Namen des Elements über das document.forms-Objekt und das zugehörige elements-Objekt (wie in Schema 3 / Beispiel 3)
  Mit document.forms.Formularname wird dabei das Formular angesprochen und über das Unterobjekt .elements.Elementname die fragliche Auswahlliste. Formularname und Elementname entsprechen jeweils dem name-Attribut des form- bzw. select-Elements, das Sie ansprechen möchten. Diese lange Schreibweise erlaubt verständlicheren Code, denn es ist sofort ersichtlich, dass ein Formularelement angesprochen wird.

• mit dem Namen des Formulars und des Elements als Indexnamen (wie in Schema 4 / Beispiel 4)
  Diese Art des Ansprechens ist eine zu Schema 3 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Geben Sie mit document.forms["Formularname"].elements["Elementname"] den Namen des Formulars und der Auswahlliste als String an. Diese Schreibweise wird insbesondere für den Zugriff auf Auswahllisten benötigt, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 und 3 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Formularnamen bzw. den Auswahllistennamen enthält.

Das options-Objekt ist ein Array, der die Optionen der Auswahlliste enthält. Er hat selbst besitzt die Eigenschaft : 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 selected, defaultSelected, text und value. Die Eigenschaft 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 select-Elementobjekt aufgelistet sind. Die Einträge des options-Arrays sind dementsprechend option-Elementobjekte mit weiteren Eigenschaften.

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

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 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)

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

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

<html>
  <head>
    <title>Test</title>
    <script>
      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öschen" onclick="Loeschen()">
    </form>
  </body>
</html>

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. Genauso gut 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 select-Elementobjekts vorgesehen. Die hier beschrieben Methode wird allerdings zuverlässiger unterstützt.