DHTML

Ett dynamiskt formulär - 2

Just nu har vi ett formulär med två listor att välja område respektive ort. Det är inte riktigt vad vi eftersträvar och vi ska göra ett par ändringar. Först vill vi att den undre listan inte ska visas förrän man gjort valet i den övre listan. Eftersom listan är id-märkt går den att komma åt via DOM och även göras osynlig. Detta gör vi med hjälp av händelsen onLoad som vi lägger in i BODY-elementet. OnLoad "triggas" när sidan laddas in eller laddas om så vi vet att den kommer att köras när vi kommer till sidan. Vi hade även kunnat sätta att elementet ska vara osynligt direkt inne i elementet men väljer här ett annat sätt. När händelsen inträffar gör vi som vi gjorde tidigare och sätter att SELECT-elementet med id=city inte ska visas:

När sidan laddas syns nu inte längre den undre listan. Vi har ännu inte skrivit den funktion som ska anropas : showCity så det blir ett fel i webbläsaren om du ändrar val i listan. Snart ska vi lägga till all kod, men en sak i taget.

Nu är det dags att ta två steg tillbaka och förklara lite av koden. Den första listan skapas med följande kod:

<select onchange="showCity(this.options[this.selectedIndex].value)">

	<option value="none" selected>--Välj område--</option>

	<option value="Härjedalen">Härjedalen</option>

	<option value="Gotland">Gotland</option>

	<option value="Utlandet">Utlandet</option>

</select>

Det är alltså elementet SELECT som innehåller fyra stycken OPTION, alltså olika val. SELECT motsvarar en lista med val i verkligheten där varje OPTION utgör ett val i listan.

Värdet och namnet på valet är i det här fallet Gotland i båda fallen, men de måste inte alltid vara lika. Värdet beskrivs med value="värde" och namnet som visas på webbsidan beskrivs inom själva OPTION.

Det går att bestämma vilket val i listan som ska visas för användaren när sidan laddas första gången (eller om sidan laddas om). I det val, den OPTION, man vill ska vara förutbestämt val lägger man då till SELECTED (eller SELECTED="SELECTED" för att vara riktigt korrekt). I koden här väljer vi att valet "--Välj område--" ska visas :

Sen används en händelse (ett event) som heter onChange och som utlöses när användaren väljer ett element i listan.

I den här händelsen anropas en funktion som vi snart ska skriva. Anropet ser ut som :

Vi ska kolla närmare på det här anropet.

ShowCity() är själva funktionsanropet och

Om vi märker upp delarna ännu mer

1. Elementet vi pratar om
2. Dess lista med OPTION-element
3. Det element i listan som är valt
4. Det valda elementets värde

this står i det här fallet för SELECT-elementet och options är dess lista med OPTION-element. Resultatet av this.options är alltså en vektor (en slags lista) med element i. SELECT-elementet har attributet som håller reda på det index i listan som just nu är valt och med hjälp av det plockar vi ut det OPTION-element som användaren har klickat för. Nu återstår att ta fram detta elements värde, vilket görs genom attributet value. Det är alltså detta värde som vi skickar med som argument till funktionen showCity.