Show/Hide via dropdown menu?

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

Code:

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

Thread: Show/Hide via dropdown menu?

Thread Tools

Search Thread

Show/Hide via dropdown menu?

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions