Page 1 of 1
toggle visibility with drop down box
Posted: Mon Mar 14, 2011 12:21 am
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.
Re: toggle visibility with drop down box
Posted: Mon Mar 14, 2011 10:59 pm
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.
Re: toggle visibility with drop down box
Posted: Tue Mar 15, 2011 4:06 am
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?
Re: toggle visibility with drop down box
Posted: Tue Mar 15, 2011 5:31 am
by dt22
Solution figured out.....