JavaScript Switch Content

**centenial** · 05-27-2006, 02:39 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:

Code:

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

Code:

<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?

**djr33** · 05-27-2006, 05:46 AM

You need a script in the header section, with a function called "changediv()" (or something else, but that's what I'm usign for the example).

In that script, it will change the contents of the div... not sure how that works. There are different ways.

But... it's something like divname.content, but that IS wrong... just pointing you in the right direction.
Look on dd to see if there's a script like that around, or google it.

then, in your select, <select onChange="changediv(this.value)">
(I think the this.value is right, but guessing.)

And... you also need to specify that the divs are hidden unless selected, or it will defeat the point.
Looking at it again, you should have the divchange script make all divs but the chosen one hidden and that one visable, not change the contents of a particular div... but that might be easier.
You could just have html for the 'different' divs stored in the script, then display the right one in the specified div.
But... your way will probably work too... I just don't have the code.

I'm sure someone will figure it out

**tech_support** · 05-27-2006, 05:54 AM

OK, I got it but something's wrong! Take a look folks...

Code:

<form name="test">
<p>
<select name="dropdown" onchange="change()" size="1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select> <input type="button" value="Change" name="B1" onclick="change()"></p>
</form>
<div id="div1" style="display:none">
Div 1 Text
</div>

<div id="div2" style="display:none">
Div 2 Text
</div>
<script>
function change()		{

	if (document.test.dropdown.selectedIndex=="1")		{
	
		document.getElementById("div1").style.display = "block"
	}
	
	if (document.test.dropdown.selectedIndex=="2")		{
	
		document.getElementById("div2").style.display = "block"
	}
	
}
</script>

**djr33** · 05-27-2006, 06:02 AM

Why are you putting the script right there? Wouldn't it be better off in the head section? Perhaps that's related, though i'm not an expert on script positioning...

Also, to allow for expansion of the script, this

Code:

        if (document.test.dropdown.selectedIndex=="1")          {
        
                document.getElementById("div1").style.display = "block"
        }
        if (document.test.dropdown.selectedIndex=="2")          {
        
                document.getElementById("div2").style.display = "block"
        }

should be rewritten as:

Code:

document.getElementById("div"+document.test.dropdown.selectedIndex).style.display = "block";

Additionally, this:
<input type="button" value="Change" name="B1" onclick="change()">
is totally worthless.
It just does it again... you already have "onchange", and this is a button to submit the current setup again... take that out... doesn't do anything.
UNLESS want a button to click instead of auto-changing when the dropdown changes.

**otaku** · 05-27-2006, 12:49 PM

Try something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
// <![CDATA[
function showDiv(obj){
	if(document.getElementById){
		divs=document.getElementById("cont").getElementsByTagName("DIV");
		num=obj.options[obj.selectedIndex].value - 1;
		for(i=0;i<divs.length;i++){
			if (divs[i].className=="txt"){ 
				if(i==num){
					divs[i].style.display = "block";
				}else{
					divs[i].style.display = "none";
				}
			}	
		}
	}
}
// ]]>
</script>
</head>
<body>
<form id="form1" action=""> 
	<div>
		<select id="select1" onchange="showDiv(this.form.select1)"> 
			<option value="1">Option 1</option> 
			<option value="2">Option 2</option> 
			<option value="3">Option 3</option> 
		</select> 
	</div>
</form>
<div id="cont">
	<div class="txt" style="display:block;">
		Div 1 Text
	</div>
	<div class="txt" style="display:none;">
		Div 2 Text
	</div>
	<div class="txt" style="display:none;">
		Div 3 Text
	</div>
</div>
</body>
</html>

Place your desired div inside the <div id="cont"> </div> with class="txt"

**paulalbert** · 09-05-2007, 03:12 PM

Otaku's script works great for me across all browsers, except for the small problem I notice in Firefox 1.5 and 2.

If you select option 2 and then refresh, the div goes back to div1, but the option 2 remains selected:

http://library2.med.cornell.edu/Test/example.html

Anyone have any bright ideas for making option1 the default selected option on refresh?

thanks,
Paul

**rdutton** · 09-06-2007, 05:28 AM

I see what you mean, that is annoying.. or a feature?. The solution depends on what you want the default behaviour to be. Add in this script somewhere after the select box (or trigger it on the document onload). If you want the document to go back to its original default, uncomment the first line. If you want the correct div to be displayed based on the value kept after refresh, uncomment the second line.

Code:

<script>
	//document.getElementById('select1').selectedIndex = 0;  //or
	//showDiv(document.getElementById('select1'));
</script>

Note that it wont work with browsers not supporting getElementById e.g. IE5.0

**Strangeplant** · 09-06-2007, 12:45 PM

I've used this in on occasion in the past - I found it some where on the web:

Code:

function getElement(id)
{
  var element = null;
  if ( document.getElementById )
    element = document.getElementById( id );
  else if (document.all)
    element = document.all[id];
  return(element);
}

**paulalbert** · 09-06-2007, 02:21 PM

Adding:

<script type="text/javascript"> document.getElementById('select1').selectedIndex = 0; </script>

just before the body tag did the track. Thank you both, rdutton and Strangeplant.

Best,
Paul

Thread: JavaScript Switch Content

Thread Tools

Search Thread

JavaScript Switch Content

Tiny Problem in Firefox

Bookmarks

Bookmarks

Posting Permissions