This is hard to explain but here's my predicament. I have 2 drop down menus in a form for "Main Category" and "Restaurant Type". My boss wants it so when Restaurant is chosen from the first drop down, the 2nd drop down appears, which is what this code below is already doing. The problem is if you submit the form, then decide to go back and change your Restaurant type, the drop down for Restaurant Type is missing. You can get it to come back by switching to another main category, then switching back to Restaurant.

Does anybody know how I could modify this code to fix this?

Code:
// in script section
function toggleVisibleOnEquals(id, x1, x2)
{	
	var el = document.getElementById(id);
	if (x1 == x2) 
	{
		el.style.visibility = "visible";		
	}
	else
	{
		el.style.visibility = "hidden";
	}
}

<!-- and in the main code -->

<select name="dt" style="width: 170px;" onChange="toggleVisibleOnEquals('foodtype',this.value,3016);" >
<option>...
</select>

<span id="foodtype" style="visibility: hidden;">
<select name="rt" style="width: 170px;" >
<option>...
</select>
</span>
Thanks in advance for any assistance.
-Gibb