JavaScript - Tutorial - Objektreferenz

JavaScript - Tutorial - Objektreferenz - Das options-Objekt

In modernen Browsern ist dieses Objekt vom Typ NodeList (W3C-DOM-Level-3).

window

document

forms

elements

options

options ist ein Array-Objekt, welches Information über alle mit dem <option>-tag erzeugten Auswahlmöglichkeiten eines <select>-Feldes enthält.

Attribute des Objekts options
Attribut		Bedeutung
`length`		Anzahl der Auswahlmöglichkeiten
`[#]`		#-te Auswahlmöglichkeit

Hinweis: durch die Zuweisung document.forms[#].elements[#].options.length=0; läßt sich die jeweilige Auswahlliste leeren.

Attribute einer Auswahlmöglichkeit
Attribut		Bedeutung
`defaultSelected`		true wenn vorgewählt, sonst false
`index`		Index der Auswahlmöglichkeit
`selected`		true wenn ausgewählt, sonst false
`text`		Textinhalt
`value`		Wert

Hinweis: Eine Option setzt man durch document.forms[#].elements[#].options[#]=new Option(textstring);.
Der Platzhalter textstring steht dabei für eine beliebige Zeichenkette oder String-Variable. Diese Vorgehensweise eignet sich zum Ändern vorhandener Einträge genauso wie zum Anfügen neuer Einträge.

HTML-Quelltext des Formulars:


<form name="demo">
<table cellpadding="5" cellspacing="2" border="0" width="100%">
<tr><td style="background:#D0F0D0" align=center>
<select name="waehler" size="1" onChange="RealizeOption()">
<option>hier w&auml;hlen</option>
</select>
</ts></tr><tr><td style="background:#D0F0D0" align=center>
neuer Auswahlpunkt:<br>
<input type=text name="eingabe" size="15" maxlength="13"><br>
<input type=button value="Option hinzuf&uuml;gen" onClick="NewOption()">
</ts></tr><tr><td style="background:#D0F0D0" align=center>
aktuelle Auswahl:<br>
<input type=text name="auswahl" size="15" maxlength="13" readonly>
<input type=text name="nummer" size="6" maxlength="4" readonly>
</ts></tr><tr><td style="background:#D0F0D0" align=center>
<input type=button value="Optionen leeren" onClick="EmptyOptions()">
</ts></tr><tr><td style="background:#D0F0D0" align=center>
Auflistung aller Optionen:<br>
<textarea name="ausgabe" cols="13" rows="10" readonly></textarea>
</td></tr>
</table>
</form>

In diesem Beispiel hat das Formular den Namen demo. Der Ausdruck document.demo ist also mit document.forms[0] gleichzusetzen.
Außerdem haben alle wichtigen Formularelemente Namen erhalten, daher kann man gleichsetzen:
document.demo.elements[0] ist document.demo.waehler (Selectbox)
document.demo.elements[1] ist document.demo.eingabe (Textfeld)
document.demo.elements[3] ist document.demo.auswahl (Textfeld)
document.demo.elements[4] ist document.demo.nummer (Textfeld)
document.demo.elements[6] ist document.demo.ausgabe (mehrzeiliges Textfeld).
Die Buttons haben keine Namen erhalten. Wozu auch.

JavaScript-Quelltext im head-Bereich


<script type="text/javascript">
<!--
function RealizeOption()
/* wertet die Auswahl aus */
{
  var number=document.demo.waehler.selectedIndex;
  var Text;
  if ((number<0)||(number>document.demo.waehler.options.length))
  {
    document.demo.auswahl.value="";
    document.demo.nummer.value="";
    return;
  }
  else
  {
    Text=document.demo.waehler.options[number].text;
    document.demo.auswahl.value=Text;
    document.demo.nummer.value=String(number);
  }
}

function ListOptions()
/* Listet alle Optionen in das große Textfeld */
{
  var i,Text="";
  for (i=0;i<document.demo.waehler.options.length;i++)
    Text=Text+document.demo.waehler.options[i].text+"\n";
  document.demo.ausgabe.value=Text;
  RealizeOption();
}

function NewOption()
/* fügt eine neue Option hinzu */
{
  var count,Text=document.demo.eingabe.value;
  if (Text=="")
    return;
  count=document.demo.waehler.options.length;
  document.demo.waehler.options[count]=new Option(Text);
  document.demo.waehler.options.length=count+1;
  ListOptions();
}

function EmptyOptions()
/* leert alle Optionen außer der ersten */
{
  document.demo.waehler.selectedIndex=0;
  document.demo.waehler.options.length=1;
  ListOptions();
}
//-->
</script>

Autor: Ulrich Kritzner