Conditional DropDown Boxes

Hey Guys,

Just wondering whether anyone could help with a conditional form.

i’ve been googling for a couple of hours and everything i find is so close to what i want but not quite there. in a nut shell i want 6 levels of combo boxes, so the user would see the first box and select an option and then depending on what they selected a new combo box would appear and so on.

i managed to find one that did three levels but i have no idea when it comes to Javascript so i cant get it to work with more than three.

any help would be glady appreciated

this was the example i found:-

[CODE]<script type=”text/javascript”>
// Place in this array the ID of the element you want to hide
var hide=[‘the_minutemen’,’Planet_Smashers’,’crass’,’Madonna’,
‘the_misfits’,’next’,’id2′];
function setOpt()
{
resetOpt(); // Call the resetOpt function. Hide some elements in the “hide” array.
for(var i=0,sel=document.getElementsByTagName(‘select’);i<sel.length;i++)
{
sel[i].onchange=function()
{
if(this.parentNode.tagName.toLowerCase()!=’div’)
resetOpt(); // Hides the elements in “hide” array when the first select element is choosen
try
{
document.getElementById(this.value).style.display=”;
}
catch(e){} ; // When the value of the element is not an element ID
}
}
}

window.addEventListener?window.addEventListener(‘load’,setOpt,false):
window.attachEvent(‘onload’,setOpt);

function resetOpt()
{
for(var i=0;i<hide.length;i++)
document.getElementById(hide[i]).style.display=’none’; // Hide the elements in “hide” array
}
</script>
Artist:
<select>
<option value=”the_minutemen”>The Minutemen</option>
<option value=”Planet_Smashers”>Planet Smashers</option>
<option value=”crass”>Crass</option>
<option value=”Madonna”>Madonna</option>
<option value=”the_misfits”>The Misfits</option>
</select>

<div id=”the_minutemen”>
The Minutemen Album:
<select>
<option value=”album”>The Minutemen album1</option>
<option value=”next”>Show next ‘select’ element</option>
<option value=”album”>The Minutemen album3</option>
<option value=”album”>The Minutemen album4</option>
<option value=”album”>The Minutemen album5</option>
</select>
</div>

<div id=”Planet_Smashers”>
Planet Smashers Album:
<select>
<option value=”album”>The Planet Smashers album1</option>
<option value=”id2″>Show element with the id of ‘id2′</option>
<option value=”album”>The Planet Smashers album3</option>
<option value=”album”>The Planet Smashers album4</option>
<option value=”album”>The Planet Smashers album5</option>
</select>
</div>

<div id=”crass”>
Crass Album:
<select>
<option value=”album”>Crass Album1</option>
<option value=”next”>Show next ‘select’ element</option>
<option value=”album”>Crass Album3</option>
<option value=”album”>Crass Album4</option>
<option value=”album”>Crass Album5</option>
</select>
</div>

<div id=”Madonna”>
Madonna Album:
<select>
<option value=”album”>madonna Album1</option>
<option value=”id2″>Show element with the id of ‘id2′</option>
<option value=”album”>madonna Album3</option>
<option value=”album”>madonna Album4</option>
<option value=”album”>madonna Album5</option>
</select>
</div>

<div id=”the_misfits”>
The Misfits Album:
<select>
<option value=”album”>the_misfits Album1</option>
<option value=”album”>the_misfits Album2</option>
<option value=”album”>the_misfits Album3</option>
<option value=”id2″>Show element with the id of ‘id2′</option>
<option value=”album”>the_misfits Album5</option>
</select>
</div>

<div id=”id2″>
Element with an ID of “id2″
<select>
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>

<div id=”next”>
“Next” element
<select>
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>[/CODE]

Also in #JavaScript _↴