M
Miguel Durán
Hi,
I've got this script to make multiple chained drop downs in an html doc.
Here is it, I have populated it with several choices:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>multiple option</title>
<meta hElement1-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta hElement1-equiv="imagetoolbar" content="no">
<script language="JavaScript">
Element1=["target1","target2"];
Element2=["Element2A","Element2B","Element2C"];
Element2A=["alpha","beta"];
alpha=["day","night"];
day=["XYZ","ABC"];
XYZ=["Mickey","Minnie","Goofy"];
ABC=["Mickey","Minnie","Goofy"];
Mickey=["target1"];
Minnie=["target1"];
Goofy=["target1"];
night=["Mickey","Goofy"];
Mickey=["target1"];
Goofy=["target1"];
beta=["Donald"];
Donald=["target1"];
Element2B=["alpha","beta"];
alpha=["day","night"];
day=["XYZ","ABC"];
XYZ=["Mickey","Minnie","Goofy"];
ABC=["Mickey","Minnie","Goofy"];
Mickey=["target1"];
Minnie=["target1"];
Goofy=["target1"];
night=["Mickey","Goofy"];
Mickey=["target1"];
Goofy=["target1"];
beta=["Donald"];
Donald=["target2"];
Element2C=["alpha","beta"];
alpha=["day","night"];
day=["XYZ","ABC"];
XYZ=["Mickey","Minnie","Goofy"];
ABC=["Mickey","Minnie","Goofy"];
Mickey=["target1"];
Minnie=["target1"];
Goofy=["target1"];
night=["Mickey","Goofy"];
Mickey=["target1"];
Goofy=["target1"];
beta=["Donald"];
Donald=["target2"];
function createMenu (mainMenu,subMenu,hideMenu){
if(hideMenu){
for(a=2;a<arguments.length;a++){
arguments[a].length=0;
}
}
itemArray=eval(mainMenu[mainMenu.selectedIndex].text);
subMenu.length=0;
subMenu.style.display='' ;// or 'inline'
subMenu.options[0] = new Option(itemArray[0]);
for(i=1;i<itemArray.length;i++){
subMenu.options = new Option(itemArray,itemArray+".html");
}
}
function getSelectedItems(form){
items=new Array();
for(i=1,a=-1;i<form.length;i++){
if(form.type=="select-one" || form.type=="select-multiple"){
items[++a]=form[form.selectedIndex].text;
}
}
return items;
}
</script>
<style type="text/css">
<!--
body{font: bold 12px "Trebuchet MS", Verdana, sans-serif; background:
#FFFFFF}
*/
select {
font: bold 12px "Trebuchet MS", Verdana, sans-serif;
background: #DED6BC;
border: 1px solid;
border-color: #000000;
*/
}
#menus { position: absolute; left: 200px; top: 100px;}
input { background: #DED6BC}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a name="c"></a>
<div id ="menus">
<form>
<p>
<select size=3 name=category onChange="
createMenu(this,theList,theList2,theList3,theList4
,theList5,theList6);">
<option value="Element1">Element1
<option value="Element2">Element2
</select>
<select style="display:none" size=3 name="theList" onchange="
createMenu(this,theList2,theList3,theList4,theList
5,theList6);">
</select>
<select style="display:none" size=3 name="theList2" onchange="
createMenu(this,theList3,theList4,theList5,theList
6);">
</select>
<select style="display:none" size=3 name="theList3"
onchange="createMenu(this,theList4,theList5,theList6);">
</select>
</select>
<select size=3 style="display:none" name="theList4"
onchange="createMenu(this,theList5,theList6);">
</select>
</select>
<select size=3 style="display:none" name="theList5"
onchange="createMenu(this,theList6);">
</select>
</select>
<select size=3 style="display:none" name="theList6"
onchange="if(this.selectedIndex)result.value='You selected
'+(getSelectedItems(this.form).join(' > '))">
</select>
</p>
<input type="text" name="result" size="80">
</form>
</div>
</body>
</html>
This script does not work in the current state. Here are my problems:
I would like to map every choice path (which always ends either with the
item 'target1' or 'target2') to a single value -can be a codeID- to be able
to call another html page with this codeID as name.
At this point I have foreseen a maximum of 7 chained menus, but in some
cases, the path until 'target1' or 'target2' is shorter. How can I take this
variability into account to produce the final codeID for the call to the
html page ?
much appreciated,
mduran
I've got this script to make multiple chained drop downs in an html doc.
Here is it, I have populated it with several choices:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>multiple option</title>
<meta hElement1-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta hElement1-equiv="imagetoolbar" content="no">
<script language="JavaScript">
Element1=["target1","target2"];
Element2=["Element2A","Element2B","Element2C"];
Element2A=["alpha","beta"];
alpha=["day","night"];
day=["XYZ","ABC"];
XYZ=["Mickey","Minnie","Goofy"];
ABC=["Mickey","Minnie","Goofy"];
Mickey=["target1"];
Minnie=["target1"];
Goofy=["target1"];
night=["Mickey","Goofy"];
Mickey=["target1"];
Goofy=["target1"];
beta=["Donald"];
Donald=["target1"];
Element2B=["alpha","beta"];
alpha=["day","night"];
day=["XYZ","ABC"];
XYZ=["Mickey","Minnie","Goofy"];
ABC=["Mickey","Minnie","Goofy"];
Mickey=["target1"];
Minnie=["target1"];
Goofy=["target1"];
night=["Mickey","Goofy"];
Mickey=["target1"];
Goofy=["target1"];
beta=["Donald"];
Donald=["target2"];
Element2C=["alpha","beta"];
alpha=["day","night"];
day=["XYZ","ABC"];
XYZ=["Mickey","Minnie","Goofy"];
ABC=["Mickey","Minnie","Goofy"];
Mickey=["target1"];
Minnie=["target1"];
Goofy=["target1"];
night=["Mickey","Goofy"];
Mickey=["target1"];
Goofy=["target1"];
beta=["Donald"];
Donald=["target2"];
function createMenu (mainMenu,subMenu,hideMenu){
if(hideMenu){
for(a=2;a<arguments.length;a++){
arguments[a].length=0;
}
}
itemArray=eval(mainMenu[mainMenu.selectedIndex].text);
subMenu.length=0;
subMenu.style.display='' ;// or 'inline'
subMenu.options[0] = new Option(itemArray[0]);
for(i=1;i<itemArray.length;i++){
subMenu.options = new Option(itemArray,itemArray+".html");
}
}
function getSelectedItems(form){
items=new Array();
for(i=1,a=-1;i<form.length;i++){
if(form.type=="select-one" || form.type=="select-multiple"){
items[++a]=form[form.selectedIndex].text;
}
}
return items;
}
</script>
<style type="text/css">
<!--
body{font: bold 12px "Trebuchet MS", Verdana, sans-serif; background:
#FFFFFF}
*/
select {
font: bold 12px "Trebuchet MS", Verdana, sans-serif;
background: #DED6BC;
border: 1px solid;
border-color: #000000;
*/
}
#menus { position: absolute; left: 200px; top: 100px;}
input { background: #DED6BC}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a name="c"></a>
<div id ="menus">
<form>
<p>
<select size=3 name=category onChange="
createMenu(this,theList,theList2,theList3,theList4
,theList5,theList6);">
<option value="Element1">Element1
<option value="Element2">Element2
</select>
<select style="display:none" size=3 name="theList" onchange="
createMenu(this,theList2,theList3,theList4,theList
5,theList6);">
</select>
<select style="display:none" size=3 name="theList2" onchange="
createMenu(this,theList3,theList4,theList5,theList
6);">
</select>
<select style="display:none" size=3 name="theList3"
onchange="createMenu(this,theList4,theList5,theList6);">
</select>
</select>
<select size=3 style="display:none" name="theList4"
onchange="createMenu(this,theList5,theList6);">
</select>
</select>
<select size=3 style="display:none" name="theList5"
onchange="createMenu(this,theList6);">
</select>
</select>
<select size=3 style="display:none" name="theList6"
onchange="if(this.selectedIndex)result.value='You selected
'+(getSelectedItems(this.form).join(' > '))">
</select>
</p>
<input type="text" name="result" size="80">
</form>
</div>
</body>
</html>
This script does not work in the current state. Here are my problems:
I would like to map every choice path (which always ends either with the
item 'target1' or 'target2') to a single value -can be a codeID- to be able
to call another html page with this codeID as name.
At this point I have foreseen a maximum of 7 chained menus, but in some
cases, the path until 'target1' or 'target2' is shorter. How can I take this
variability into account to produce the final codeID for the call to the
html page ?
much appreciated,
mduran