|
problems with multiple (many) chained drop-downs
Here we go again, this time in the right forum...
DISCLAIMER: I'm a complete newbie in JS
Some time ago I found a very interesting 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[i] = new Option(itemArray[i],itemArray[i]+".html");
}
}
function getSelectedItems(form){
items=new Array();
for(i=1,a=-1;i<form.length;i++){
if(form[i].type=="select-one" || form[i].type=="select-multiple"){
items[++a]=form[i][form[i].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 code- to be able to call another html page with this value as name.
At this point I have foreseen a maximum of 7 chained menus, but in some cases the choices, the way to 'target1' or 'target2' is shorter. How can I take this variability into account to produce the final code for the call to the html page ?
much appreciated,
mduran
|
Dev Articles Community Forums Sponsor:
June 18th, 2004, 08:47 AM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
