Menu
Hi All,
I’ve got a bit of javascript which I use to create a multiple level drop down.
It works a treat but what I would like to do in enhance it a little bit to only display the child element (and corresponding labels) as follows:
a) If a child level exists
b) When the parent level has becomes the focus (either with a mouse / keyboard)
And I want to do this without using a round trip to the server.
Is that possible (using the DOM and keeping the solution as accessible as possible)?
If not, how would I go about adding a class which would “grey” out each option where no destination exists. I’ve tried adding a class to various parts of the code, and to the Var but with no joy.
Here’s the code:
(I’ve stripped out the actual data to keep the code below simple)
[COLOR=DimGray]<html>
<head>
<script language=”JavaScript”>
// other parameters
displaywhenempty=”No destinations”
valuewhenempty=-1
displaywhennotempty=”Please select one”
valuewhennotempty=0
function change(currentbox)
{
var numb = currentbox.id.split(“_“);
var currentbox = numb[1];
var i=parseInt(currentbox)+1;
// I empty all level boxes following the current one
var _“+i+”‘))!=’undefined'”);
while (_“+i)!=null)
{
var child = document.getElementById(“level
// I empty all options except the first (it isn’t allowed)
for (m=child.options.length-1;m>0;m–)
child.options[m]=null;
// I reset the first option
child.options[0]=new Option(displaywhenempty,valuewhenempty);
i=i+1;
}
// now I create the string with the “base” name (“stringa”), ie. “data_1_0”
// to which I’ll add _0,_2,
var stringa=’data’;
i=0;
_t=eval(“typeof(document.getElementById(‘level
while (_t && document.getElementById(“level
{
eval(“stringa=stringa+’_‘+document.getElementById(“level
if (i==currentbox)
break;
i=i+1;
}
// filling the “child” level (if exists)
var following=parseInt(currentbox)+1;
_t=eval(“typeof(document.getElementById(‘level
if (_t && document.getElementById(“level
{
child=document.getElementById(“level_“+following);
stringa=stringa+”
i=0;
while ((eval(“typeof(“+stringa+i+”)!=’undefined'”)) || (i==0))
{
// if there are no options, I empty the first option of the “child” level
// otherwise I put “-select-” in it
if ((i==0) && eval(“typeof(“+stringa+”0)==’undefined'”))
if (eval(“typeof(“+stringa+”1)==’undefined'”))
eval(“child.options[0]=new Option(displaywhenempty,valuewhenempty)”);
else
eval(“child.options[0]=new Option(displaywhennotempty,valuewhennotempty)”);
else
eval(“child.options[“+i+”]=new Option(“+stringa+i+”.text,”+stringa+i+”.value)”)
i++;
}
//child.focus();
i=1;
levelstatus=”;
cstatus=stringa.split(“_”);
while (cstatus[i]!=null)
{
levelstatus=levelstatus+cstatus[i];
i=i+1;
}
return levelstatus;
}
}
</script>
</head>
<body>
<form>
<label for=”level_0″><span>level_0</span></label>
<select name=”level0″ id=”level_0″ onChange=”change(this);”>
<option value=”value1″>All</option>
<option value=”id goes here”>country name goes here</option>
</select>
<br />
<label for=”level_1″><span>level_1</span></label>
<select name=”level1″ id=”level_1″ onChange=”change(this)”>
<option value=”value1″> </option>
</select>
<br />
<label for=”level_2″><span>level_2</span></label>
<select name=”level2″ id=”level_2″ onChange=”change(this);”>
<option value=”value1″> </option>
</select>
<br />
<label for=”level_3″><span>level_3</span></label>
<select name=”level3″ id=”level_3″ onChange=”change(this);”>
<option value=”value1″> </option>
</select>
</form>
<noscript>javascript disabled</noscript>
</body>
</html>
Cheers
Kessa