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.
toggle visibility with drop down box
Moderator: General Moderators
- 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
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.
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)
Re: toggle visibility with drop down box
Thank you for the replay...i got this at last...
But when I change the option value from digit to character this will stop working why.... Any idea?
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>Re: toggle visibility with drop down box
Solution figured out.....