Hello all.

I 've found a script which does exactly what I need it to do, but now I'm being greedy and wanting it to do a bit more for me.

The script basically produces two dropdown lists where the second dropdown is dependant on the choice of the first.

Here's the code...... I'll explain what how I'm trying to extend it after.

-----------------------------------------------------------------------------------
<html>
<head>
<script>
// Define the values for your drop downs here
// Note: If you want different text than value you can also specify text1_0 etc.
value1_0='Pick a city';
value1_1='Copenhagen';
value1_2='Odense';
value1_3='Skagen';

value2_0='Pick a city';
value2_1='Stockholm';
value2_2='Gothenburg';
value2_3='Kiruna';

// Continue with value3_0 etc...
// Leave the rest of the script as is

function update_dropdowns(mother)
{
child=0; document.myform.child.options.length=1;
while(eval('window.value'+mother+'_'+child)||eval('window.text'+mother+'_'+child)){
document.myform.child.options.length=child+1;
id=mother+'_'+child;
if (!eval('window.value'+id)) {eval('value'+mother+'_'+child+'=text'+id)}
if (!eval('window.text'+id)) {eval('text'+mother+'=value'+id)}
document.myform.child.options[child].value=eval('value'+id);
document.myform.child.options[child].text=eval('value'+id);
child++;
}
}
</script>
</head>

<body onLoad="update_dropdowns(0);">
<form name="myform">
<select name="mother" onChange='update_dropdowns(this.selectedIndex);'>
<option>Pick a country</option>
<option>Denmark</option>
<option>Sweden</option>
</select>
<select name="child"><option></option></select>
</form>

</body>
</html>
-----------------------------------------------------------------------------------


What I'm trying to do now, is get two of these working side by side on the same page (resulting in 4 dropdown lists altogether). So dropdown A would determine the contents of dropdown B, then dropdown C would determine the contents of dropdown D.

Any help / assistance on this would be greatly appreciated.

Thanks
Matt