dynamic div

Hey,

What I'm trying to do is, based on a user selection from a drop down, dynamically show a div and it's contents. This is a short version of what I'm doing so code is missing.

I have the select with the onChange

<select id="program" tabindex="2" onChange="reveal(choice)" name="program">

Code (markup):

Then I have the div with the name

<div id="prerequisites_div"> </div>

Code (markup):

and then I have the function that handles the processing

function reveal(chosen)
{


	var n=1;
	len = document.form1.program.length;
	i = 0;
	chosen = "none";

	for (i = 0; i < len; i++) 
	{
		if (document.form1.program[i].selected)
		{
		
		chosen = document.form1.program[i].value

		} 
	}
	if (chosen == "BSN") 
	{

	prerequisites_div.innerHTML = prerequisites_div.innerHTML +
	
	"<td align='middle' bgcolor='white' colspan='2'>....on and on to this" + n
                 }
                 else
                 {
                 	return false;
                 }

}

Code (markup):

Can someone help me see this through or steer in the right way to get this accomplished.

 

To get the value:

var chosen = document.getElementById('program').value;

Code (markup):

To set the pre requesites:

document.getElementById('prerequisites_div').innerHTML += 'blah blah';

Code (markup):

Also, you can pass the select element directly to the onchange function, like this:

<select tabindex="2" onChange="reveal(this)" name="program">

Code (markup):

and then to get the value, all you got to do is

function reveal(select) {
   ...........
   var chosen = select.value;
   ............
   if (chosen == "BSN") {
            document.getElementById('prerequisites_div').innerHTML += 'blah blah';
   } else {
            return false;
   }
    ............
}

Code (markup):