Mer om rullgardinsmenyer

I ett tidigare avsnitt tittade vi på en mycket enkel rullgardinsmeny, men några länkar och en OK-knapp som skickar besökaren till rätt sida.

Nu skall vi ta ett nytt tag med samma meny, men göra den mer användbar. I det här avsnittet skall vi plocka bort OK-knappen.

Skriptet som vi lägger i HEAD-elementet ser ut så här:

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm skriptet
function hoppTill(form) {
var rullgardin=form.hopp.selectedIndex;
parent.location.href=(form.hopp.options[rullgardin].value)
}
// Sluta gömma -->
</SCRIPT>

I BODY-elementet finns formuläret som skapar menyn och anropar funktionen hoppTill():

<FORM name="minform">
<SELECT name="hopp" size=1>
<OPTION selected value="sida1.html">Länk 1
<OPTION value="sida2.html">Länk 2
<OPTION value="sida3.html">Länk 3
<OPTION value="sida4.html">Länk 4
</SELECT>
<INPUT type="button" value="OK" onClick="hoppTill(this.form)">
</FORM>

Alla förändringar för att ta bort OK-knappen gör vi direkt i FORM-taggen.

<A name="minmeny"></A>
<FORM name="minform">
<SELECT name="hopp" size=1 onChange="hoppTill(this.form)">
<OPTION selected value="#minmeny">Välj här...
<OPTION value="sida1.html">Länk 1
<OPTION value="sida2.html">Länk 2
<OPTION value="sida3.html">Länk 3
<OPTION value="sida4.html">Länk 4
</SELECT>
</FORM>

<A name="minmeny"></A>
Först lägger vi till ett ankare som gör att besökaren kommer tillbaka till menyn om han väljer "Välj här...". Ankaret lägger vi på raden före den inledande FORM-taggen.

onChange="hoppTill(this.form)"
I raden "SELECT name" lägger vi till händelsehanteraren onChange. Det är här funktionen hoppTill() anropas, och anropet tar med sig värdet från value så att rätt sida kan öppnas.

<OPTION selected value="#minmeny">Välj här...
Här blir värdet ankaret "minmeny", vilket gör att just det här valet leder tillbaka till menyn.

<INPUT type ...
Den här raden har vi helt enkelt tagit bort. Den behövs inte längre, eftersom händelsehanteraren onChange i "SELECT name" tar hand om händelserna i menyn.

Här kan du pröva menyn. Det finns bara en länk i den och den leder till en sida som talar om vilken webbläsare du har.

I nästa avsnitt gör vi om den här menyn så att den kan öppna länkar i ramar.

© SupportData.Net