Multilevel selectmenu

Siden er opdateret 28.7.2008

Funktioner i denne select-boks stammer oprindeligt fra Chr. Hansen

Valget i første boks bestemmer indholdet i anden boks:

Vælg i primær indeks først

Primære indeks:

Sekundære indeks:

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>
Valid XHTML og CSS / Copyright © Hjemmesideskolen juli 2005
Hjemmesideskolen
Du er her: Forsiden - html - Multilevel selectmenu
Brugere lige nu: 1
Home Mail