Results 1 to 2 of 2

Thread: Show / Hide drop-down menu

  1. #1
    Join Date
    Jul 2006
    Posts
    64
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default Show / Hide drop-down menu

    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.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Play with this script:
    Code:
    <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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. The Following User Says Thank You to rangana For This Useful Post:

    acctman (10-08-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •