asked on

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

ASKER CERTIFIED SOLUTION

quincydude

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial