pagetutor.com - HTML tutorials for the rest of us
JavaScript Tutor v 1.0 oversat af Ewan Rasmusson & Andrew Smith af Joe Barta
pagetutor.com
Download som zip fil.
JavaScript Tutor - Lektion 12

Endnu et "indbygget" array er options array i en drop-down liste. Studér følgende liste...

HMTL koden for dette er: 

<FORM NAME="form02">
<SELECT NAME="bradykids">
<OPTION VALUE="jesper" >Jesper
<OPTION VALUE="per"    >Per
<OPTION VALUE="thomas" >Thomas
<OPTION VALUE="michael">Michael
<OPTION VALUE="anja"   >Anja
<OPTION VALUE="frido"  >Frido
</SELECT>
</FORM>

Bemærk at listen har et navn og hver option har en værdi.

Se på følgende script... 

<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="jesper" >Jesper
<OPTION VALUE="per"    >Per
<OPTION VALUE="thomas" >Thomas
<OPTION VALUE="michael">Michael
<OPTION VALUE="anja"   >Anja
<OPTION VALUE="frido"  >Frido
</SELECT>
</FORM>

</BODY>
</HTML>

Prøv den.

Den bruger event handler onChange. Når tilstanden af drop-down listen ændres, kalder det på funktionen GoBrady(). Denne funktion viser en alert boks som viser "valgte Index" egenskaben af options array. Leg med det indtil du forstår hvad der sker.

OK, vi kan nemt hente indekset af den valgte Brady. Men hvordan kan vi hente værdien? Hvor "valgte Index" er en egenskab af array, er værdierne de enkelte optioners egenskaber. Er det forståeligt?

Kan du huske da vi kiggede på billede arrays og vi sagde at det først billede i array er billedet [0], det andet er billedet [1] osv.? Options array fungere på samme måde. Vi kaldte vores array bradykids, derfor er den første option bradykids[0], den anden er bradykids[1], den trejde er bradykids[2], osv. I det sidste script greb vi fat i "valgte Index" og gemte det i variablen brady, for at få egenskabernes enkelte optioner med bradykids[brady]. Er du stadig med eller er du fuldsændig forvirret? Prøv at kigge på denne modificerede version af det sidste script... 

<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="jesper" >Jesper
<OPTION VALUE="per"    >Per
<OPTION VALUE="thomas" >Thomas
<OPTION VALUE="michael">Michael
<OPTION VALUE="anja"   >Anja
<OPTION VALUE="frido"  >Frido
</SELECT>
</FORM>

</BODY>
</HTML>

Prøv det.

Fortsæt med at studere det indtil du forstår det.

<< Tilbage         Næste >>

JavaScript Tutor

   Lektioner:   Intro  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25