JavaScript - Auf Auswahllisten zugreifen

Select S.715 Das umfassende Referenzwerk

Ein graphische Auswahlliste

Überblick

  • form.element_name
  • form.elements[i]

Eigenschaften

Select erbt Eigenschaften von Input und HTML-Element und definiert oder überschreibt folgende Eigenschaften:

  • length
  • options
  • selectedIndex
  • type
length

Ein schreibgeschützter Integer, der angibt, wie viele Elemnte das Array options[] hat. Der Wert dieser Eigenschaft ist dasselbe wie options.length.

options

Ein Array von Option-Objekten, die jeweils eine der im Select-Elemnt angezeigten Optionen beschreibt.

selectedIndex

Ein Integer, der angibt, welchen Index die ausgewählte Option im Select-Objekt hat. Wurde keine Option ausgewählt, so hat selectedIndex den Wert -1. Ist mehr als eines ausgewählt, so gibt selectedIndex nur den Index der ersten Option an.
Seit JavaScript 1.1 ist die Eigenschaft les- und schreibbar. Wenn Sie den Wert dieser Eigenschaft setzen, schalten Sie damit dei angegebene Option ein und alle anderen aus, auch wenn das Attribut multiple angegeben ist.

type

Ein schreibgeschützte String-Eigenschaft aller Formularelemente, die den Typ des Elements angibt. Die Typ-Eigenschaft kann zwei mögliche Werte haben. select-one In der Auswahlliste ist nur eine Auswahl möglich. select-multiple es sind mehrere Auswahlen möglich und das Attribut multiple wurde im HTML-Tag gesetzt.

Methoden

Select erbt die Methoden von Input und HTML-Element

Event-Handler

Select erbt Event-Handler von Input und HTML-Element und definiert oder überschreibt den folgenden Event-Handler:

  • onchange

    Wird aufgerufen, wenn der Benutzer ein Element ein- oder ausschaltet.

Select.options[] S.718 Das umfassende Referenzwerk

Die in einem Select-Objekt verfügbaren Auswahlen

Überblick

  • select.options[i]
  • select.options.length

Beschreibung

Die Eigenschaftoptions[] enthält ein Array von Option-Objekten, die je eine der Wahlmöglichkeiten repräsentieren, die im Select-Objekt zur Verfügung stehen. Die Eigenschaft options.length gibt ebenso wie select.length die Anzahl der Array-Elemente an.

Beispiel:

.selectedIndex - Ausgewählter Index

options[f.elements["Land"].selectedIndex] - Option, die gerade ausgewählt ist

options[f.elements["Land"].selectedIndex].value - Wert der ausgewählten Option

Beispiel1: Auf Auswahlliste zugreifen - Version für alte Browser

<script type="text/javascript">

function zeigeDaten(f) {

var ausgabe = "";

//auf Auswahlliste zugreifen

ausgabe += "\nLand: " + f.elements["Land"].options[f.elements["Land"].selectedIndex].value;

alert(ausgabe);

}

</script>

Neuere Browser verstehen f.elements["Land"].value, da in einer Selektionsliste nur eine Option auswählbar ist, kann es nur einen Wert für value geben.

Beispiel2: Auf Auswahlliste zugreifen

<script type="text/javascript">

function zeigeDaten(f) {

var ausgabe = "Textfeld: " + f.elements["Benutzername"].value;

ausgabe += "\nPasswortfeld: " + f.elements["Passwort"].value;

ausgabe += "\nMehrzeiliges Textfeld: " + f.elements["Kommentar"].value;

ausgabe += "\nCheckbox: AGB ";

ausgabe += (f.elements["AGB"].checked) ? "akzeptiert" : "nicht akzeptiert";

ausgabe += "\nGeschlecht: ";

if (f.elements["Geschlecht"][0].checked) {

ausgabe += "weiblich";

}else if (f.elements["Geschlecht"][1].checked) {

ausgabe += "männlich";

} else {

ausgabe += "--keine Angabe--";

}

//auf Auswahlliste zugreifen

ausgabe += "\nLand: " + f.elements["Land"].value;

alert(ausgabe);

}

</script>

Formular zur Registrierung:

Benutzername:

Passwort:

Geschlecht: weiblich    männlich

Land:

Interessen:

Kommentar:

Ich akzeptiere die AGB

zurück