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

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

I have a two part question and need help getting this to work as I am a javascript newbie and not sure how to code this. I have a drop down list with a few options, I then have a div that will be shown on page load by default. Then have a couple of hidden div's probably using display:none styling... what I would like is when option A is selected in drop down, then Div A is displayed, if option B is selected in drop down then Div B is displayed, if option C is selected from drop down, then Div C is displayed, also when the new div is displayed the other div's become hidden, so only one div is displayed at a time.

Second part of the question would be for this to also work with keyboard navigation, so if user is keyboard and tabs into drop down, selects the option, hits enter, upon hitting enter from selected option will then display the div as would if he were using the mouse. Also needs to be cross browser compatible.

Thank You
0
Pdesignz
Asked:
Pdesignz
  • 6
  • 5
  • 4
1 Solution
 
sunithnairCommented:
You could do it this way
<html>
<head>
<script language="javascript">
function ShowHideDiv(src)
{
  for(i=0;i<src.options.length;i++)
    document.getElementById(src.options[i].value).style.display="none";
  document.getElementById(src.options[src.selecteIndex].value).style.display="block";  
}
</script>
<head>
<body>
 <select name="ddl" id="ddl" onchange="ShowHide(this)">
   <option value="Div1">Div C</option>
   <option value="Div2">Div B</option>
   <option value="Div3">Div A</option>
 </select>
 <div id="Div1">Div Content</div>
 <div id="Div2">Div Content</div>
 <div id="Div3">Div Content</div>
</body>
</html>

Open in new window

0
 
sunithnairCommented:
The second part of the question will work automatically because the onchange event will fire when there is a change in the selected value. You could do this to show only 1st div in the begining
<html>
<head>
<script language="javascript">
function ShowHideDiv(src)
{
  for(i=0;i<src.options.length;i++)
    document.getElementById(src.options[i].value).style.display="none";
  document.getElementById(src.options[src.selecteIndex].value).style.display="block";  
}
</script>
<head>
<body>
 <select name="ddl" id="ddl" onchange="ShowHide(this)">
   <option value="Div1">Div C</option>
   <option value="Div2">Div B</option>
   <option value="Div3">Div A</option>
 </select>
 <div id="Div1" style="display:block;">Div Content</div>
 <div id="Div2" style="display:none;">Div Content</div>
 <div id="Div3" style="display:none;">Div Content</div>
</body>
</html>

Open in new window

0
 
ncooCommented:
Can be used with any value where the values are part of the div id.

Copy and paste to test.
<html>
<head>
 
<script type="text/javascript">
function showDivs(chooser) {
	for(var i=0;i<chooser.options.length;i++) {
		var div = document.getElementById('div'+chooser.options[i].value);
		div.style.display = 'none';
	}
	var div = document.getElementById('div'+chooser.value);
	div.style.display = 'block';
}
</script>
 
</head>
<body>
<select onchange="showDivs(this)">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
 
<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>
</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
PdesignzPPC SpecialistAuthor Commented:
Nothing happens, when I select the different options, I tried the first example and it just displayed all three divs, I then tried your other example and only displayed single div and would not change when I selected different options

Thans
0
 
PdesignzPPC SpecialistAuthor Commented:
ncoo,

What would I need to do if I wanted to have additional drop downs and divs on the same page, so say a drop down with 3 divs and the another set of drop downs with divs

Thanks
0
 
ncooCommented:
If you are using IE to test a local Javascript/HTML page you will have to allow blocked content to be run (top yellow bar)

This will not appear for non local files.
0
 
PdesignzPPC SpecialistAuthor Commented:
no I am testing on live server, your example does work. My response was to the other that does not change when I choose the other options. If I want to have additional drop down and divs on same page, what would I need to do.

Thanks
0
 
ncooCommented:
I have updated the code to allow this new option.

showDivs('div',this)

The first parameter is the prefix for the div id.

Copy and paste the selects as many times as you need changing the prefix as required to match the divs.
<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';
}
</script>
 
</head>
<body>
<select 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 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>
 
<hr/>
 
<select onchange="showDivs('div2',this)">
<option value="y">Y</option>
<option value="z">Z</option>
</select>
 
<div id="div2y" style="background-color:black;width:100px;height:100px;display:none;"></div>
<div id="div2z" style="background-color:grey;width:100px;height:100px;display:block;">default showing</div>
 
 
 
</body>
</html>

Open in new window

0
 
sunithnairCommented:
Sorry my code had some spelling mistakes
<html>
<head>
<script language="javascript">
function ShowHideDiv(src)
{
  for(i=0;i<src.options.length;i++)
    document.getElementById(src.options[i].value).style.display="none";
  document.getElementById(src.options[src.selectedIndex].value).style.display="block";  
}
</script>
<head>
<body>
 <select name="ddl" id="ddl" onchange="ShowHideDiv(this)">
   <option value="Div1">Div A</option>
   <option value="Div2">Div B</option>
   <option value="Div3">Div C</option>
 </select>
 <div id="Div1" style="display:block;">Div Content A</div>
 <div id="Div2" style="display:none;">Div Content B</div>
 <div id="Div3" style="display:none;">Div Content C</div>
</body>
</html>

Open in new window

0
 
PdesignzPPC SpecialistAuthor Commented:
would I stick the divs inside a mster div if I wanted to postion the divs next to the drop down or to the right of the drop down and not below

Thanks
0
 
sunithnairCommented:
Yes you can do that as long as you have the id attribute defined.
0
 
ncooCommented:
You can use the divs anyway you like, just as long as the div have ids that match the select values they will work.

You could put them inside other divs, set the left and top property.

For example:
<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 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>

Open in new window

0
 
PdesignzPPC SpecialistAuthor Commented:
One thing that I did notice is that if the page is refreshed, the options in the drop down stay the same of the options that was previously selected, it does not change back to default as it was when the page originally was loaded.

Thanks
0
 
ncooCommented:
That's default browser behaviour.

Add an onload function to clear it like below:
<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
 
PdesignzPPC SpecialistAuthor Commented:
Awesome!, Thanks for the help!!
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.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 6
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now