Rullgardinsmeny i ramar

Om vi skall använda rullgardinsmenyn från det förra avsnittet i en ramsida, vill vi åstadkomma två saker:

• För det första skall länken från menyn öppnas i rätt ram.
• För det andra skall "Välj här" inte leda någonstans alls, inte ens till själva menyn.

Det här gör vi genom att ändra både i skriptet och i FORM-taggen. Vi börjar med skriptet:

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

if (form.hopp.selectedIndex=='0')
Om besökaren markerar "Välj här" efter att ha valt en annan länk (onChange), ger det här ett sätt att se till att inget händer. Alla värden i formuläret indexeras automatiskt och det första värdet får index 0.

Vårt första värde i formuläret nedan är "Välj här". Om detta värde markeras kommer selectedIndex att bli 0.

return
I så fall avslutas skriptkörningen.

else
Om selectedIndex är något annat än 0, fortsätter skriptkörningen.

parent.linkram.location.href=(form.hopp.options[rullgardin].value)
Variabeln rullgardin deklareras likadant här som i förra avsnittet, men i nästa rad kommer en förändring. Mellan parent och location sätter vi in namnet på den ram där länken skall öppnas, i det här fallet linkram.

Vi tar bort raden med ankaret alldeles före FORM-taggen. Eftersom det inte längre finns något ankare som heter "minmeny", tar vi även bort anropet i den första OPTION-raden. Ändra värdet på value till "#".

<FORM name="minform">
<SELECT name="hopp" size=1 onChange="hoppTill(this.form)">
<OPTION selected value="#">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>

Här får alltså "Välj här" index 0, "Länk 1" index 1, "Länk 2" index 2 och så vidare.

Men vi vill kanske ha den "icke verksamma" länken längst ned, kanske så att listan ser ut så här:

Gå till mina bilder
Gå till mina kusiner
Gå till mina recept
Gå ingenstans

Då är det den sista "länken" som inte skall öppna någonting alls.

För att det skall fungera ändrar vi i skriptet och i FORM-taggen. Först skriptet, där vi ändrar ett enda värde:

if (form.hopp.selectedIndex=='3')

Länken "Gå ingenstans" är den fjärde valmöjligheten och därmed har den index 3.

I FORM-taggen möblerar vi om en smula (kommentarerna behöver vi inte ha med i koden):

<FORM name="minform">
<SELECT name="hopp" size=1 onChange="hoppTill(this.form)">
<OPTION selected value="bilder.html">Gå till mina bilder // index 0
<OPTION value="kusiner.html">Gå till mina kusiner // index 1
<OPTION value="recept.html">Gå till mina recept // index 2
<OPTION value="#">Gå ingenstans // index 3
</SELECT>
</FORM>

Testa menyn i ramar

© SupportData.Net