Brugere lige nu: 19
Siden er opdateret 28.7.2008
Valget i første boks bestemmer indholdet i anden boks:
I sidens head anbringes et kald til et ekstern javascript - lagt eksternt for at siden kan validere:
<script type="text/javascript" src="multilevelmenu.js"></script>
Indholdet af denne eksterne scriptfil definerer nogle funktioner og variabler:
function addOption(text,value,box) {
if(text) {
var opt = new Option(text,value);
var count = box.options.length;
box.options[count] = opt;
} else {
alert("Du skal skrive en tekst");
}
}
var subindexes = new Object();
var subvalues = new Object();
subindexes["0"] = new Array(
"menupunkt 1.1",
"menupunkt 1.2",
"menupunkt 1.3"
);
subvalues["0"] = new Array(
"http://adresse11.dk/",
"http://adresse12.dk/",
"http://adresse13.dk/"
);
subindexes["1"] = new Array(
"menupunkt 2.1",
"menupunkt 2.2",
"menupunkt 2.3"
);
subvalues["1"] = new Array(
"http://adresse21.dk/",
"http://adresse22.dk/",
"http://adresse23.dk/"
);
subindexes["2"] = new Array(
"menupunkt 3.1",
"menupunkt 3.2",
"menupunkt 3.3"
);
subvalues["2"] = new Array(
"http://adresse31.dk/",
"http://adresse32.dk/",
"http://adresse33.dk/"
);
function loadSubIndex(i) {
//empty subindex list
document.getElementById("subindex").length = 0;
//add header:
addOption("Vælg et emne","Vælg et emne",document.getElementById("subindex"));
//fill subindexlist with new entries:
for(var c=0;c<subindexes[i].length;c++) {
addOption(subindexes[i][c],subvalues[i][c],document.getElementById("subindex"));
}//for
}
For hver valgmulighed i den venstre boks skal der i scriptet skrives et sæt subindexes["nummer"] = new Array() med tilhørende subvalues["nummer"] = new Array() i scriptet.
Antallet af valgmuligheder, som vises i den højre boks, bestemmer du selv. Husk bare, at alle linjer undtagen den sidste i array'ene skal sluttes med et komma!
Endelig er der formularen med de to selectbokse - den indeholder også en smule javascript:
<form action="" method="get" onsubmit="return false">
<fieldset>
<legend>Vælg i primær indeks først</legend>
<table>
<tr>
<td>
<p>Primære indeks:</p>
<select name="mainindex" id="mainindex" onclick="loadSubIndex(this.selectedIndex);">
<option>Kategori 1</option>
<option>Kategori 2</option>
<option>Kategori 3</option>
</select>
</td>
<td>
<p>Sekundære indeks:</p>
<select name="subindex" id="subindex" onchange="if(this.selectedIndex>0)
{document.location.href=this.options[this.selectedIndex].value; }">
<option>Vælg først i primær indeks</option>
</select>
</td>
</tr>
</table>
</fieldset>
</form>