Hauptmenü
Codeschnipsel
Dynamisches DropDown Menü
Ein Auswahlmenü, dass ein anderes Menü beeinflusst.
Folgendes kommt in den Headbereich unter Eigenschaften der Seite > Erweitert
<script LANGUAGE="javascript">
<!--
// Set the number of positions for the arrays.
var MaxNumArray = 6
// Defining the arrays.
var MainList=new Array(MaxNumArray)
var SubList=new Array(MaxNumArray)
// The last view used.
var lastLayerVis = 1
// Create the data
// If wants to personalize, just put the data in the next function.
function PrepareData()
{
for (i = 0; i < MaxNumArray; i++)
{
MainList[i]="Show " + (i+1) + " item(s) in the sublist."
SubList[i] ="Item" + (i+1) + "."
}
}
// This will show the main list. The list will let us to change the size of the other list.
function ShowMainList()
{
var page = "MainList:<br /><SELECT NAME='mainlist' onChange='writeList()'>"
for (i=0;i<MainList.length;i++)
{
page+="<OPTION VALUE="+MainList[i]
if (i==0)
{
page+=" SELECTED "
}
page+=">"+MainList[i]
}
page+="</SELECT>"
document.write(page);
}
// The sublist.
// Here I define as layers as I need. The first visible layer will be the layer with a list of 1 element.
// Be sure to put the layer in the correct (top,left) corner...
function ShowSubList()
{
var page = ""
for (j=1;j<=MainList.length;j++)
{
if (j==1)
page+="<DIV ID='LSubList"+j+"' style='position:absolute; width:20; height:20; z-index:1; top: 17; left: 305; visibility:visible;'>"
else
page+="<DIV ID='LSubList"+j+"' style='position:absolute; width:20; height:20; z-index:1; top: 17; left: 305; visibility:hidden;'>"
page+='SubList:<select NAME="sublist'+j+'" size="'+j+'">'
for (i=0;i<SubList.length;i++)
{
page+="<OPTION VALUE="+SubList[i]
if (i==0)
page+=" SELECTED "
page+=">"+SubList[i]
}
page+="</SELECT>"
page+="</DIV>"
}
document.write(page)
}
// When there is a change in the main list; I maintain the selected index in the sublist
// and change the visibility of the pertinent layers.
function ChooseSubList(asize)
{
document.form1['sublist'+asize].selectedIndex = document.form1['sublist'+lastLayerVis].selectedIndex;
document.all['LSubList'+asize].style.visibility="visible"
document.all['LSubList'+lastLayerVis].style.visibility="hidden"
// Finally I must remember the last layer that is visible.
lastLayerVis = asize
}
// A simple all given the selected index of the item in the main list.
function writeList()
{
ChooseSubList(document.form1.mainlist.selectedIndex+1)
}
//-->
</script>
Und in den Body (HTML Feld oder Textfeld)
<form name="form1">
<script LANGUAGE="javascript">
<!--
PrepareData()
ShowMainList()
ShowSubList()
//-->
</script>
</form>
Beispiel
Hinweis
Nicht alles funktioniert in jedem Browser!