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

PdesignzPPC SpecialistAsked:
Who is Participating?
 
quincydudeConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.