We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

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

Pdesignz
Pdesignz asked
on
Medium Priority
9,143 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.