Show/Hide via dropdown menu? [Archive]

acctman

04-01-2010, 04:29 AM

Can someone help me make a dropdown menu that will show and hide a div when a option is select.

Select: Type1, Type2 (drop-down menu)

If Type2 is selected show Works Form (DIV id=works)
If Type1 is selected show New Form (DIV id=new) make sure DIV id=works is hidden.

div id=new will always be shown, div id=works is the div that will be shown if its select with Type2

Thanks in advance.

vwphillips

04-01-2010, 09:12 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.hide {
display:none;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function Cng(obj){
var opts=obj.options;
for (var z0=0;z0<opts.length;z0++){
if (document.getElementById(opts[z0].value)){
document.getElementById(opts[z0].value).style.display=opts[z0].selected?'block':'none';
}
}
}

/*]]>*/
</script>
</head>

<body>
<select onchange="Cng(this);" >
<option value="" >Option 0</option>
<option value="works" >Option 1</option>
<option value="new" >Option 2</option>
</select>

<div id="works" class="hide" >WORKS</div>
<div id="new" class="hide" >NEW</div>
</body>

</html>