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