asked on

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

JohnSixkiller

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>

webdott

ASKER

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

ASKER CERTIFIED SOLUTION

gops1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JohnSixkiller

That's it! :)

webdott

ASKER

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

webdott

ASKER

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>
 </P>
<FORM>
<P>
<SELECT NAME="dropdown" SIZE="1"><OPTION>--Choose--<OPTION VALUE="d1">Layer 1<OPTION VALUE="d2">Layer 2</SELECT></P>
</FORM>
<P>
 </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>
 </P>
<P>
 
</BODY>
</HTML>

thanks
mike

JohnSixkiller

gops1

right you missed the onchange event inside <select> tag:
<select onchange="show(this)">

webdott

ASKER

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>
 </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>
 </P>
<DIV id="d1">
<P>
This is d1  = 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>
 </P>
<P>
to add more divs</P>
<P>
go to style:  add another    #d4 , #d5  etc</P>
<P>
then add the choice in the dropdown box</P>
<P>
choice = Layer 4</P>
<P>
value = d4</P>
<P>
 
</BODY>
</HTML>

webdott

ASKER

Thanks for your help. I was going to split the points, but your solution was the best and easiest to understand.

Thanks again
Mike

gjorswellls

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!

gjorswellls

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

webdott

ASKER

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