Javascript Tutor - Lektion 12
Ein weiteres "eingebautes" Array ist das Optionen Array eine einer Select-Box. Stell Dir mal folgende Liste vor...
Hier ist der HTML Code dafür:
<FORM NAME="form02"> <SELECT NAME="bradykids"> <OPTION VALUE="greg" >Greg <OPTION VALUE="marsha">Marsha <OPTION VALUE="peter" >Peter <OPTION VALUE="jan" >Jan <OPTION VALUE="bobby" >Bobby <OPTION VALUE="cindy" >Cindy </SELECT> </FORM> |
Beachte, dass die Liste einen Namen und jede Option einen Wert hat.
Schau Dir mal das folgende Script an...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="Javascript"><!--
function GoBrady()
{
brady = window.document.form02.bradykids.selectedIndex;
alert(brady);
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form02">
<SELECT NAME="bradykids" onChange="GoBrady()">
<OPTION VALUE="greg" >Greg
<OPTION VALUE="marsha">Marsha
<OPTION VALUE="peter" >Peter
<OPTION VALUE="jan" >Jan
<OPTION VALUE="bobby" >Bobby
<OPTION VALUE="cindy" >Cindy
</SELECT>
</FORM>
</BODY>
</HTML>
|
Es benutzt den Event Handler onChange. Wenn sich der Status der Liste ändert, wird die Funktion GoBrady() aufgerufen. Diese Funktion öffnet eine AlertBox, die die Eigenschaft selectedIndex des Options-Array anzeigt. Spiel mal ein wenig damit herum, bis Du verstanden hast, was hier passiert.
OooKaay, wir können leicht den Index einer ausgewählten Option ermitteln. Aber wie erhalten wir deren Wert? Nun, während der selectedIndex eine Eigenschaft des Arrays ist, sind die Werte Eigenschaften der jeweiligen Option. Ist das einleuchtend?
Erinnerst Du Dich, als wir das Bilder-Array betrachtet haben und feststellten, dass das erste Bild im Array images[0] ist, das zweite Bild images[1] ist usw.? Nun, das Options-Array ist ähnlich. Wir benannten unser Array bradykids, also ist die erste Option bradykids[0], die zweite Option ist bradykids[1], die dritte Option ist bradykids[2], usw. Im vorherigen Script ermittelten wir den selectedIndex und speicherten ihn in die Variable brady. Also konnten wir die Eigenschaften jeder einzelnen Option mit bradykids[brady] ermitteln. Kommst Du noch mit oder habe ich Dich hoffnungslos verwirrt? Schau Dir mal die modifizierte Version des letzten Scriptes an...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="Javascript"><!--
function GoBrady()
{
brady = window.document.form02.bradykids.selectedIndex
alert(window.document.form02.bradykids[brady].value);
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form02">
<SELECT NAME="bradykids" onChange="GoBrady()">
<OPTION VALUE="greg" >Greg
<OPTION VALUE="marsha">Marsha
<OPTION VALUE="peter" >Peter
<OPTION VALUE="jan" >Jan
<OPTION VALUE="bobby" >Bobby
<OPTION VALUE="cindy" >Cindy
</SELECT>
</FORM>
</BODY>
</HTML>
|
Studiere dieses Beispiel, bis Du es verstehst.
| << Zurück Weiter >> |
 |
 |
