optionNN 2 IE 3 DOM 1

Das option-Objekt spiegelt das option-Element wider, das innerhalb eines select-Elements verschachtelt sein muss. In Referenzen auf option-Objekte wird meistens das übergeordnete select-Objekt verwendet, wobei das option-Objekt als Mitglied eines Arrays mit Optionen behandelt wird, die zu diesem select-Objekt gehören. Bei modernen Browsern können Sie ein option-Objekt auch direkt anhand seiner ID referenzieren. Die unter den gemeinsamen Eigenschaften weiter vorne in diesem Kapitel beschriebene disabled-Eigenschaft ist in IE ab Version 4 und Netscape 6 verfügbar.

 

Sie können die Optionen in einem select-Objekt in Netscape ab Version 3 und Explorer ab Version 4 modifizieren und mit rückwärtskompatiblem Code versehen, der auch in den neuesten Browsern noch funktioniert. Wenn Sie bei dieser Modifizierung vorhandene Optionen durch eine andere Liste derselben Länge ersetzen, können Sie den Eigenschaften text, value und selected der einzelnen Optionen im options-Array des select-Objekts ganz einfach neue Werte zuweisen. Enthält die neue Liste jedoch mehr oder weniger Optionen, ist es sinnvoller, alle vorhandenen option-Objekte zu entfernen und neue Objekte einzufügen. Mithilfe einer Konstruktorfunktion für ein neues Option-Objekt können Sie Objekte einzeln erstellen und ihnen anschließend die gewünschten Positionen im options-Array zuordnen. Die Syntax für den Konstruktor lautet wie folgt:

var newOpt = new Option("text", "value", isDefaultSelectedFlag, 
isSelectedFlag);
 

Die folgende Funktion demonstriert das typische Verfahren beim Umschreiben der Optionsliste eines select-Objekts:

function setSelect(selectElemObj) {
    // remove existing options
    selectElemObj.options.length = 0;
    // create and assign options, one by one
    selectElemObj.options[0] = new Option("Hercule Poirot", "poirot", false, false);
    selectElemObj.options[1] = new Option("Miss Marple", "marple", false, false);
    ...
}
 

In einer Produktionsumgebung würden die Werte für die Konstruktorparameter höchstwahrscheinlich in Form eines Arrays mit Objekten an die Seite übergeben, sodass die Zuweisung der neuen Optionen innerhalb einer for-Schleife durchgeführt werden kann. Weitere Ansätze zur Durchführung dieser Aufgabe finden Sie in den Abhandlungen der Methoden options.add( ) (nur IE) und select.add( ) (nur IE ab Version 5 und Netscape 6).

 
HTML-Äquivalent
 
<option>
 
Objektmodellreferenz
 
[window.]document.formName.selectName.options[i]
[window.]document.forms[i].elements[i].options[i]
[window.]document.getElementById("elementID")
 
Objektspezifische Eigenschaften
 
defaultSelectedformindexlabelselectedtextvalue
 
Objektspezifische Methoden

Keine.

 
Objektspezifische Ereignisbehandlungsroutineneigenschaften

Keine.

defaultSelectedNN 2 IE 3 DOM 1

Lesen/Schreiben

Legt fest, ob das selected-Attribut im Tag eines Elements gesetzt ist. Sie können die aktuelle selected-Eigenschaft mit defaultSelected vergleichen, um festzustellen, ob sich der Status des select-Steuerelements seit dem Laden des Dokuments geändert hat. Eine Änderung dieser Eigenschaft hat keinen Einfluss auf den aktuellen selected-Status.

 
Beispiel
 
var listItem = document.forms[0].selector.options[2];
if (listItem.selected != listItem.defaultSelected) {
    // process for changed state
}
 
Wert

Boolescher Wert: true | false.

 
Standardwert

Wird durch das HTML-Tag-Attribut festgelegt.

formNN 6 IE 4 DOM 1

Schreibgeschützt

Gibt eine Referenz auf das form-Objekt zurück, das das select-Element und seine Optionen enthält.

 
Beispiel
 
var theForm = document.getElementById("myOption3").form;
 
Wert

form-Objektreferenz.

 
Standardwert

Keiner.

indexNN 6 IE 3 DOM 1

Schreibgeschützt

Gibt den ganzzahligen, auf Null basierenden Indexwert des aktuellen option-Objekts innerhalb der Sammlung mit den Optionen des select-Elements zurück. Die Eigenschaft selectedIndex des select-Objekts gibt den Indexwert der Option zurück, die derzeit ausgewählt ist.

 
Beispiel
 
var whichItem = document.getElementById("myOption3").index;
 
Wert

Eine ganze Zahl.

 
Standardwert

Keiner.

labelNN 6 IE 5(Mac)/6(Win) DOM 1

Lesen/Schreiben

Spiegelt das label-Attribut des option-Elements wider. Diese Eigenschaft ist für den Einsatz in hierarchischen Menüs gedacht, funktioniert jedoch nur in IE 5/Mac, wo sie denselben Wert zurückgibt wie die Eigenschaft text.

 
Wert

Zeichenfolge.

 
Standardwert

Keiner.

selectedNN 2 IE 3 DOM 1

Lesen/Schreiben

Bestimmt, ob die Listenoption vom Benutzer ausgewählt wurde, d. h. ob der dazugehörige Wert mit dem Formular abgeschickt wird. Über Skripts kann der Wert so geändert werden, dass Elemente algorithmisch ausgewählt werden. Wenn Sie feststellen möchten, welche Option ausgewählt ist, können Sie die Eigenschaft selectedIndex des select-Objekts verwenden. Diese Methode ist effizienter, als alle Optionen zu durchlaufen, um zu überprüfen, für welche Optionen die selected-Eigenschaft auf true gesetzt ist. Eine Ausnahme liegt vor, wenn das select-Element für die Mehrfachauswahl eingerichtet ist. In diesem Fall müssen Sie alle Optionen durchlaufen, um die ausgewählten Optionen ausfindig zu machen.

 
Beispiel
 
document.forms[0].selectList.options[3].selected = true;
 
Wert

Boolescher Wert: true | false.

 
Standardwert

false

textNN 2 IE 3 DOM 1

Lesen/Schreiben

Stellt den mit dem option-Element verknüpften Text bereit. Dieser Text befindet sich zwischen dem Start- und dem End-Tag und wird im select-Element auf dem Bildschirm angezeigt. Mit Hilfe der Eigenschaft value kann ein verborgener Wert, der mit dem Listenelement verknüpft ist, gespeichert, abgerufen und geändert werden.

 
Beispiel
 
var list = document.forms[0].selectList;
var listItemText = list.options[list.selectedIndex].text;
 
Wert

Zeichenfolge.

 
Standardwert

Keiner.

valueNN 4 IE 4 DOM 1

Lesen/Schreiben

Stellt den dem option-Element zugewiesenen Wert bereit. Ist für das option-Element ein value-Attribut oder eine value-Eigenschaft definiert, so wird dieser Wert für die Eigenschaft value zurückgegeben. Andernfalls gibt die Eigenschaft eine leere Zeichenfolge zurück.

 
Beispiel
 
var itemValue = document.forms[0].selectList.options[2]value;
 
Wert

Zeichenfolge.

 
Standardwert

Keiner.