HI

I have this script which is a dynamic form that links to other pages depending on what a user selects in one box.

It is made up of 2 boxes, but i want to add a third box. Please could someone show me how to do this as i have spent quite a long time trying to get it to work but i can't do it.

At the moment, the script is:

---------------
box1 >
---------------

which then adds options to the second box which are links

--------------
box 2 links >
--------------


what i want is a third box inbetween the links box nd the top box that changes depending on what the user selects in box 1.

Any help will be appreciated.

Here is the code i'm using:

Code:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

var store = new Array();


store[0] = new Array(
	'HTML Compendium','http://www.htmlcompendium.org',
	'Evolt','http://www.evolt.org'
);

store[1] = new Array(
	'Evolt','http://www.evolt.org',
	'CSS1 Mastergrid','http://webreview.com/wr/pub/guides/style/mastergrid.html');

store[2] = new Array(
	'Client Side JavaScript Reference','http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/',
	'Evolt','http://www.evolt.org'
);

function init()
{
	optionTest = true;
	lgth = document.forms[0].third.options.length - 1;
	document.forms[0].third.options[lgth] = null;
	if (document.forms[0].third.options[lgth]) optionTest = false;
}


function populate()
{
	if (!optionTest) return;
	var box = document.forms[0].first;
	var number = box.options[box.selectedIndex].value;
	if (!number) return;
	var list = store[number];
	var box2 = document.forms[0].third;
	box2.options.length = 0;
	for(i=0;i<list.length;i+=2)
	{
		box2.options[i/2] = new Option(list[i],list[i+1]);
	}
}



function go()
{
	if (!optionTest) return;
	box = document.forms[0].third;
	destination = box.options[box.selectedIndex].value;
	if (destination && confirm('Do you really want to go to this site?')) top.location.href = destination;
}

// -->
</SCRIPT>


</hEAD>
<BODY>
<A NAME="basics"></a><A NAME="example"></a> 
<h3>Example</h3>

<p>&nbsp;</p>

<CENTER>
<FORM>
<SELECT NAME="first" WIDTH=200 onChange="populate()">
	<OPTION VALUE="0">option1</OPTION>
	<OPTION VALUE="1">option2</OPTION>
	<OPTION VALUE="2">option3</OPTION>
</SELECT>
<BR>


<SELECT NAME="third" WIDTH=200 onChange="go()">
	<OPTION>No third level yet</OPTION>
	<OPTION>Your browser can't handle this script</OPTION>
</SELECT>
</FORM>