Show / Hide drop-down menu

[acctman]

I have three drop down menus (countries, states and province)... Can someone assist me with a code that will show States: [states dropdown] when a user select United States, and States: [province dropdown] when a user selects Canada. I know that the using style="display: none" will be used for displaying the States: label and states/province

ex: of drop-down: http://www.pspdump.com/drop/

i've found, i found a java onchange script that hides the states drop-downs on default and when United States or Canada is selected the drop-down of them showed. problem since it was an onchange it wasn't possible to re-populate with a "pre-selected" menu item. Meaning if this was on a user edit page, by default the user should see Country: [United States] States: Florida and this would all be possible by inserting Selected.

So to test this if Country: [United States] States: Florida is selected and then within the code we put Selected="selected" for each US and FL and then refresh the page both Country and States should reappear with US and FL selected. With using onchange so far I'm seeing that as not possible since the user would need to actually reselect in order to show.

I hope this makes sense, if anyone can help with a code that would be great. Or and idea how to re-populate on an edit page. Cause remember on an edit page the show/hide must also come into play as well as showing the previously selected Country and State by default when loaded.

[rangana]

Play with this script:

<script type="text/javascript">
var hideState=['state_3','state_2']; // Place in this array the ID of the select element you want to hide
window.onload=function()
{
	resetOpt(); // Hide all select element defined in the array above
	var opt=document.getElementsByName('add[country]')[0]; // First select element
	opt.onchange=function()
		{
		switch(this.value)
			{
			case 'US':
				resetOpt(); // Hide all select element defined in the array above
				document.getElementById('state_3').style.display=''; // Show US states
			break;
			case 'CA':
				resetOpt(); // Hide all select element defined in the array above
				document.getElementById('state_2').style.display=''; // Show CA states
			break;
			default:resetOpt; // Hide all select element defined in the array above 
			}	
		}
}
function resetOpt()
{
for(var i=0;i<hideState.length;i++)
	document.getElementById(hideState[i]).style.display='none'; // Hide element in the hideState array
}
</script>

Hope it helps.