?
Solved

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

Posted on 2009-02-09
15
Medium Priority
?
5,977 Views
Last Modified: 2012-08-14
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
Comment
Question by:Pdesignz
  • 6
  • 5
  • 4
15 Comments
 
LVL 16

Expert Comment

by:sunithnair
ID: 23593419
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
 
LVL 16

Expert Comment

by:sunithnair
ID: 23593442
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
 
LVL 15

Expert Comment

by:ncoo
ID: 23593503
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:Pdesignz
ID: 23593575
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
 

Author Comment

by:Pdesignz
ID: 23593651
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
 
LVL 15

Expert Comment

by:ncoo
ID: 23593671
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
 

Author Comment

by:Pdesignz
ID: 23593718
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
 
LVL 15

Expert Comment

by:ncoo
ID: 23593720
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
 
LVL 16

Expert Comment

by:sunithnair
ID: 23593726
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
 

Author Comment

by:Pdesignz
ID: 23593830
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
 
LVL 16

Expert Comment

by:sunithnair
ID: 23593917
Yes you can do that as long as you have the id attribute defined.
0
 
LVL 15

Expert Comment

by:ncoo
ID: 23593928
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
 

Author Comment

by:Pdesignz
ID: 23654816
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
 
LVL 15

Accepted Solution

by:
ncoo earned 2000 total points
ID: 23661986
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
 

Author Closing Comment

by:Pdesignz
ID: 31544670
Awesome!, Thanks for the help!!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question