根据下拉框选择变化显示不同内容

< html >
< head >
< title > Untitled Document </ title >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
< script language = " JavaScript " >
<!--
function show() ... {
if (form1.select.value=="1") 
...{
Layer1.style.visibility="visible";
}
else...{
Layer1.style.visibility="hidden";
}
if (form1.select.value=="2") ...{
Layer2.style.visibility="visible";
}
else
...{
Layer2.style.visibility="hidden";
}
}
// -->
</ script >

</ head >

< body bgcolor = " #FFFFFF "  text = " #000000 " >
< div id = " Layer1 "  style = " position:absolute; left:39px; top:373px; width:160px; height:45px; z-index:1; visibility: hidden; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000 " >< input type = " text "  size = 20  value = " dddd " ></ input ></ div >
< div id = " Layer2 "  style = " position:absolute; left:214px; top:281px; width:179px; height:33px; z-index:2; visibility: hidden; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000 " > the 
layer2  </ div >
< form name = " form1 "  method = " post "  action = "" >
< table width = " 100% "  border = " 0 "  cellspacing = " 0 "  cellpadding = " 0 "  height = " 300 " >
< tr >
< td >& nbsp;  </ td >
< td >& nbsp; </ td >
</ tr >
< tr >
< td >  
< select name = " select "  onChange = " show() " >
< option value = " 1 " > show the first layer1 </ option >
< option value = " 2 " > show layer2 </ option >
< option selected > select one </ option >
</ select >
</ td >

</ table >
</ form >
</ body >
</ html >