Tuesday, January 20, 2009

dropdown menu onclick show div hide div

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