...

View Full Version : JavaScript Switch Content



centenial
05-27-2006, 04:30 AM
Hi,

I've been driving myself crazy the past couple hours and can't figure this out. Here is what I need to do:

Have a select box like this:


<select name="dropdown">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>

Then when one of those options is selected, the appropriate div tag is displayed:


<div id="option1">
Div 1 Text
</div>

<div id="option2">
Div 2 Text
</div>

This seems like it should be really simple to do, but I can't figure it out. Please help someone?

_Aerospace_Eng_
05-27-2006, 04:55 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
var num = 2; //this is number of content divs you have
function showContent()
{
for(var i = 1; i < num + 1; i++)
{
document.getElementById('option'+i).style.display = 'none';
}
if(document.forms[0].dropdown.options[document.forms[0].dropdown.options.selectedIndex].value != "none")
{
document.getElementById(document.forms[0].dropdown.options[document.forms[0].dropdown.options.selectedIndex].value).style.display = 'block';
}
}
onload = function()
{
for(var j = 1; j < num + 1; j++)
{
document.getElementById('option' + j).style.display = 'none';
}
}
</script>
</head>

<body>
<form>
<select name="dropdown" onchange="showContent()">
<option value="none">Choose content</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</form>
<div id="option1">Div 1 Text</div>

<div id="option2">Div 2 Text</div>
</body>
</html>

centenial
05-27-2006, 05:06 AM
Thanks! Is there a way to display the content of the first div when the page loads?

felgall
05-27-2006, 07:07 AM
Remove the following reference from the stylesheet:

#option1 {display:hidden;}

_Aerospace_Eng_
05-27-2006, 07:51 AM
Remove the following reference from the stylesheet:

#option1 {display:hidden;}
There is no stylesheet. The display of the divs is handled by JS just in case a user has JS disabled, they still see content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
var num = 2; //this is number of content divs you have
function showContent()
{
for(var i = 1; i < num + 1; i++)
{
document.getElementById('option'+i).style.display = 'none';
}
if(document.forms[0].dropdown.options[document.forms[0].dropdown.options.selectedIndex].value != "none")
{
document.getElementById(document.forms[0].dropdown.options[document.forms[0].dropdown.options.selectedIndex].value).style.display = 'block';
}
}
onload = function()
{
for(var j = 1; j < num + 1; j++)
{
document.getElementById('option' + j).style.display = 'none';
}
document.getElementById('option1').style.display = 'block';
}
</script>
</head>

<body>
<form>
<select name="dropdown" onchange="showContent()">
<option value="none">Choose content</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</form>
<div id="option1">Div 1 Text</div>

<div id="option2">Div 2 Text</div>
</body>
</html>

felgall
05-27-2006, 08:01 AM
So change the javascript to remove the same code. Change the first line

for(var i = 1; i < num + 1; i++)

to read

for(var i = 2; i < num + 1; i++)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum