• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7648
  • Last Modified:

OnChange/ OnClick event to show/hide multiple div's using drop down list

I have a select drop down list that depending on what option is selected displays a certain div with content. What I am in need of is what would I need to do to be able to show/hide multiple div's with content for a single selection. So say the options are A,B,C,D... selecting A would display multiple divs ( maybe 3 or 4), selecting B would then display another set of 3 or 4 div's and then the same for C and D.  I am attaching the original script and code that was provided to me in setting this up to work with a single div. This also needs to work in Firefox & IE as well as be able to use keyboard navigation as well. I am newbie to javascript so if example could be provided, I would much appreciate it.

Thanks
<html>
<head>
 
<script type="text/javascript">
function showDivs(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 div = document.getElementById(prefix+chooser.value);
        div.style.display = 'block';
}
window.onload=function() {
  document.getElementById('select1').value='a';//set value to your default
}
</script>
 
</head>
<body>
<div style="width:300px;">
<div style="float:right;">
<div id="diva" style="background-color:red;width:100px;height:100px;display:none;"></div>
<div id="divb" style="background-color:green;width:100px;height:100px;display:block;">default showing</div>
<div id="divc" style="background-color:yellow;width:100px;height:100px;display:none;"></div>
<div id="divd" style="background-color:blue;width:100px;height:100px;display:none;"></div>
</div>
<div>
<select id="select1" onchange="showDivs('div',this)">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
</div>
</div>
</body>
</html>

Open in new window

0
Pdesignz
Asked:
Pdesignz
1 Solution
 
quincydudeCommented:
do you want something like this?
<html>
<head>
 
<script type="text/javascript">
function showDivs(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 selectedvalue = chooser.options[chooser.selectedIndex].value;
 
		if(selectedvalue == "a")
		{
			displayDivs(prefix,"a");
			displayDivs(prefix,"b");
		}
		else if(selectedvalue == "b")
		{
			displayDivs(prefix,"b");
			displayDivs(prefix,"c");
		}
		else if(selectedvalue == "c")
		{
			displayDivs(prefix,"c");
			displayDivs(prefix,"d");
		}
		else if(selectedvalue == "d")
		{
			displayDivs(prefix,"a");
			displayDivs(prefix,"d");
		}
 
}
 
function displayDivs(prefix,suffix) {
 
        var div = document.getElementById(prefix+suffix);
        div.style.display = 'block';
}
 
window.onload=function() {
  document.getElementById('select1').value='a';//set value to your default
}
</script>
 
</head>
<body>
<div style="width:300px;">
<div style="float:right;">
<div id="diva" style="background-color:red;width:100px;height:100px;display:none;"></div>
<div id="divb" style="background-color:green;width:100px;height:100px;display:block;">default showing</div>
<div id="divc" style="background-color:yellow;width:100px;height:100px;display:none;"></div>
<div id="divd" style="background-color:blue;width:100px;height:100px;display:none;"></div>
</div>
<div>
<select id="select1" onchange="showDivs('div',this)">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
<option value="d" >D</option>
</select>
</div>
</div>
</body>
</html>

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now