dropdown menu onclick show div hide div

hello, i am back.

this is what i am trying to do:
1. create a dropdown selection box in a form
    example:
    <FORM>
   <P>
 <SELECT NAME="sample dropdown" SIZE="1"><OPTION>choice 1<OPTION>choice 2</SELECT></P>
   </FORM>
2. onclicking choice 1, a div will show [ example: id="choice 1" ]
3. onclickng choice 2,  choice 1 div will hide and the choice 2 div will show

I know how to create this onclick with images and links. I can not figure out how
to create a form dropdown to do this. I am sure it is simple, but I am lost as usual.

I need the entire html code so that I can completely understand this.
Please help, need asap.

Thanks
Mike
webdottAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JohnSixkillerCommented:
Hi,

simple example:

<SCRIPT>
  var activeLayer = "layer1";

  function switchLayer(Sender){
   if(Sender.value != activeLayer){
      document.getElementById(activeLayer).style.display = 'none';
      document.getElementById(Sender.value).style.display = 'block'';
      activeLayer = Sender.value;    
  }
 }
</SCRIPT>

<SELECT onchange"switchLayers(this)">
  <option value="layer1">Layer1</option>
  <option value="layer2">Layer2</option>
</SELECT>
 
webdottAuthor Commented:
Can you give me the code with a form dropdown and a div?

I tried this and it did not work.
I am trying to understand this, but I am not getting it.

Thanks  
Mike
gops1Commented:
Try this out:
<html>
	<head>
		<title>Script Demo Gops</title>
		<style>
			#d1, #d2, #d3{display:none;}
		</style>
 
		<script language="javascript">
			var oldD="";
			function show(o){
				if(oldD!="") oldD.style.display='none';
				if(o.selectedIndex>0){
					var d=document.getElementById(o[o.selectedIndex].value);
					d.style.display='block';
					oldD=d;
				}
			}
		</script>
      </head>
<body>
	<select onchange="show(this)">
		<option>--Choose--</option>
		<option value="d1">Layer 1</option>
		<option value="d2">Layer 2</option>
		<option value="d3">Layer 3</option>
	</select>
 
	<div id="d1">
		this is a div1<br>
		this is a div1<br>
		this is a div1<br>
		this is a div1<br>
		this is a div1<br>
	</div>
	<div id="d2">
		this is a div2<br>
		this is a div2<br>
		this is a div2<br>
		this is a div2<br>
		this is a div2<br>
	</div>
	<div id="d3">
		this is a div3<br>
		this is a div3<br>
		this is a div3<br>
		this is a div3<br>
		this is a div3<br>
	</div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

JohnSixkillerCommented:
That's it! :)
webdottAuthor Commented:
Ok, this is what I have but it is not working?
what am I doing wrong. Should their be an extension in the form that
might go:
onclick = show('d1')

This is not working. Once again I am lost.

Thanks
Mike
webdottAuthor Commented:
sorry forgot to post what i did.

<HTML>
 <HEAD>
 
  <TITLE>Script Demo Gops</TITLE>
 

<SCRIPT LANGUAGE="javascript">
var oldD="";
function show(o){
if(oldD!="") oldD.style.display='none';
if(o.selectedIndex>0){
var d=document.getElementById(o[o.selectedIndex].value);
d.style.display='block';
oldD=d;
}
}
</SCRIPT>

<STYLE>
#d1, #d2, #d3{display:none;}
</STYLE>
 </HEAD>
 <BODY>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;</P>
  <FORM>
   <P>
    <SELECT NAME="dropdown" SIZE="1"><OPTION>--Choose--<OPTION VALUE="d1">Layer 1<OPTION VALUE="d2">Layer 2</SELECT></P>
   </FORM>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;</P>
  <DIV id="d1">
   <P>
    this is a div1<BR>
    this is a div1<BR>
    this is a div1<BR>
    this is a div1<BR>
    this is a div1<BR>
    </P>
   </DIV>
  <DIV id="d2">
   <P>
    this is a div2<BR>
    this is a div2<BR>
    this is a div2<BR>
    this is a div2<BR>
    this is a div2<BR>
    </P>
   </DIV>
  <DIV id="d3">
   <P>
    this is a div3<BR>
    this is a div3<BR>
    this is a div3<BR>
    this is a div3<BR>
    this is a div3<BR>
    </P>
   </DIV>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;</P>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;
 </BODY>
</HTML>

thanks
mike
JohnSixkillerCommented:
<select ONCHANGE="show(this)">
gops1Commented:
right you missed the onchange event inside <select> tag:
<select onchange="show(this)">
webdottAuthor Commented:
Thanks

It works. This is the final code:

<HTML>
 <HEAD>
  <TITLE>Script DropDown Box Selection - div change</TITLE>
 

<SCRIPT LANGUAGE="javascript">
var oldD="";
function show(o){
if(oldD!="") oldD.style.display='none';
if(o.selectedIndex>0){
var d=document.getElementById(o[o.selectedIndex].value);
d.style.display='block';
oldD=d;
}
}
</SCRIPT>



<STYLE>
#d1, #d2, #d3{display:none;}
</STYLE>



 </HEAD>
 <BODY>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;</P>
  <FORM>
   <P>
    <SELECT NAME="dropdown" SIZE="1" STYLE="width: 200px;" ONCHANGE="show(this)"><OPTION>--Choose--<OPTION VALUE="d1">Layer 1<OPTION VALUE="d2">Layer 2<OPTION VALUE="d3">Layer 3</SELECT></P>
   </FORM>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;</P>
  <DIV id="d1">
   <P>
    This is d1&nbsp; = LAYER 1 title selection<BR>
    <BR>
    </P>
   </DIV>
  <DIV id="d2">
   <P>
    This is d2 = LAYER 2 title selection</P>
   </DIV>
  <DIV id="d3">
   <P>
    This is d3 = LAYER 3 title selection<BR>
    </P>
   </DIV>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;</P>
  <P>
   to add more divs</P>
  <P>
   go to style:&nbsp; add another&nbsp;&nbsp;&nbsp; #d4 , #d5&nbsp; etc</P>
  <P>
   then add the choice in the dropdown box</P>
  <P>
   choice = Layer 4</P>
  <P>
   value = d4</P>
  <P>
   <!-- $MVD$:spaceretainer() -->&nbsp;
 </BODY>
</HTML>
webdottAuthor Commented:
Thanks for your help. I was going to split the points, but your solution was the best and easiest to understand.

Thanks again
Mike
gjorswelllsCommented:
That solution almost works for me, but i need to pass the "value" to the shopping cart.

Is it possible to refer to it with a different name ?

I'd like the result to allow me to do this...

 <option id="31" divname="31" value="my product name">31</option>

Thanks for any help!

gjorswelllsCommented:
Please ignore my last post... it was referring to another solution...

This one solves the problem outlined in my previous post,  but it only works in IE, and not Firefox ?

Can you help please ?

Thanks


webdottAuthor Commented:
i have tried this code in both ie and firefox.

the only difference is that in ie, div1 shows on page load
in firefox, div1 only shows when choice 1[layer1]  is chosen

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.