toggle visibility with drop down box

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
dt22
Forum Commoner
Posts: 32
Joined: Sat Oct 10, 2009 2:53 am

toggle visibility with drop down box

Post by dt22 »

Hi all,

I am trying to work with toggle visibility.. I have a drop-down box in my form and based on the options chooses by the user they suppose to get additional field of the form which are invisible.

I know how to work with toggle visibility in test and combo box but it is not happening with drop box..am not very good with java script..

please some one can guide me..

Thanks in advance.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: toggle visibility with drop down box

Post by Christopher »

I did this: http://www.google.com/search?q=javascri ... th+<select>

And found this about setting the style.display element: http://www.dustindiaz.com/seven-togglers/

You would call the javascript toggler code on the select's onChange event.
(#10850)
dt22
Forum Commoner
Posts: 32
Joined: Sat Oct 10, 2009 2:53 am

Re: toggle visibility with drop down box

Post by dt22 »

Thank you for the replay...i got this at last...

Code: Select all

	<script type="text/javascript">
function showDiv(prefix,chooser) 
{
        for(var i=0;i<chooser.options.length;i++) 
		{
        	var div = document.getElementById(prefix+chooser.options[i].value);
            div.style.display = 'none';
        }
 
		var selectedOption = (chooser.options[chooser.selectedIndex].value);
		
 
		if(selectedOption == "1")
		{
			displayDiv(prefix,"1");
			displayDiv(prefix,"2");
		}
		else if(selectedOption == "2")
		{
			displayDiv(prefix,"2");
			displayDiv(prefix,"3");
		}
		else if(selectedOption == "3")
		{
			displayDiv(prefix,"3");
			displayDiv(prefix,"4");
		}
		else if(selectedOption == "4")
		{
			displayDiv(prefix,"1");
			displayDiv(prefix,"4");
		}
 
}
 
function displayDiv(prefix,suffix) 
{
        var div = document.getElementById(prefix+suffix);
        div.style.display = 'block';
}

</script>
<body>

<div id="body" style="width:300px;">
	
	<form name="frmOptions">
	<select id="cboOptions" onChange="showDiv('div',this)">	
	<option value="1">Option1</option>
	<option value="2">Option2</option>
	<option value="3">Option3</option>
	<option value="4">Option4</option>
	</select>
</form></div>
		
	<div id="content" style="float:right;">
	
		<div id="div1" style="display:none;">one</div>
		<div id="div2" style="display:none;">two</div>
		<div id="div3" style="display:none;">three</div>
		<div id="div4" style="display:none;">four</div>
	
	</div>	
	
	</form>
</div>

</body>
But when I change the option value from digit to character this will stop working why.... Any idea?
dt22
Forum Commoner
Posts: 32
Joined: Sat Oct 10, 2009 2:53 am

Re: toggle visibility with drop down box

Post by dt22 »

Solution figured out.....
Post Reply