JavaScript - Objektreferenz- document - forms - options
1. Das Objekt
Mit options
kann man, wie der Name schon sagt, auf alle option
-Elemente eines select
-Feldes
zugreifen. Dabei handelt es um ein Unterelement von elements
. Insofern ist die hierarchische Struktur in der Navigation
nicht sauber dargestellt. Ich wollte allerdings nicht noch einen weiteren Unterpunkt anlegen. Sah ziemlich blöde aus. Die
Zugriffsmöglichkeiten beschränken sich hier aber nur auf eine Variante, nämlich den numerischen Index, da man bei diesem Element nicht
mit dem Attribut name
arbeiten darf. Dieses Objekt verfügt über keine Methoden.
feld = document.formularname.selectname;
blubb = feld.options[0]
2. Die Eigenschaften
selected
, defaultSelected
Damit kann man überprüfen, ob ein einzelnes option
-Element ausgewählt wurde. Dabei spielt es bei selected
keine Rolle, ob das schon vorher über das gleichnamige HTML-Attribut geschah oder per Auswahl mit der Maus. defaultSelected
dagegen prüft nur auf die Vorbelegung über HTML (selected="selected"
). Allerdings besteht keine Möglichkeit, diese Eigenschaften
zu ändern. Ist also read only.
<form name="test" action="bla.php">
<select name="bla">
<option value="1" selected="selected">blubb</option>
<option value="2">blubber</option>
<option value="3">Schwall</option>
</select>
</form>
alert (document.test.bla.options[0].selected);
selectedIndex
Da es ziemlich unkomfortabel wäre, in einer Schleife alle option
-Elemente mittels selected
darauf zu prüfen,
welches denn nun ausgewählt wurde, gibt es obige Eigenschaft. Sie liefert den numerischen Index des selektierten Elements. Allerdings
greift sie genau genommen auf das komplette select
-Feld zu, daher muss man hier nicht mit options
arbeiten.
Diesen Wert kann man auch problemlos setzen.
<form name="test" action="bla.php">
<select name="bla">
<option value="1" selected="selected">blubb</option>
<option value="2">blubber</option>
<option value="3">Schwall</option>
</select>
</form>
if (document.test.bla.selectedIndex != 2)
{
document.test.bla.selectedIndex = 2;
}
text
Hier geht es um den Text innerhalb von <option>...</option>
. Man kann ihn auslesen und auch ändern.
<form name="test" action="bla.php">
<select name="bla">
<option value="1" selected="selected">blubb</option>
<option value="2">blubber</option>
<option value="3">Schwall</option>
</select>
</form>
var index = document.test.bla.selectedIndex;
alert (document.test.bla[index].text);
value
Will man dagegen auf den zu übermittelnden Wert zugreifen, so arbeitet man hiermit. Auch hier hat man Lese- und Schreibrechte. Oder einfach ausgedrückt, man kann ihn abfragen und ändern.
<form name="test" action="bla.php">
<select name="bla">
<option value="1" selected="selected">blubb</option>
<option value="2">blubber</option>
<option value="3">Schwall</option>
</select>
</form>
var index = document.test.bla.selectedIndex;
alert (document.test.bla[index].value);
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt