<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
}
-->
</style>
<script language="javascript">
function dochange()
{
if(form1.selectedname.value==1)
{
td1.style.display="list-item";
td2.style.display="none";
td3.style.display="none";
td4.style.display="none";
td5.style.display="none";
}
if(form1.selectedname.value==2)
{
td1.style.display="none";
td2.style.display="list-item";
td3.style.display="none";
td4.style.display="none";
td5.style.display="none";
}
if(form1.selectedname.value==3)
{
td1.style.display="none";
td2.style.display="none";
td3.style.display="list-item";
td4.style.display="none";
td5.style.display="none";
}
if(form1.selectedname.value==4)
{
td1.style.display="none";
td2.style.display="none";
td3.style.display="none";
td4.style.display="list-item";
td5.style.display="none";
}
if(form1.selectedname.value==5)
{
td1.style.display="none";
td2.style.display="none";
td3.style.display="none";
td4.style.display="none";
td5.style.display="list-item";
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<select name="selectedname" onChange="return dochange()">
<option value="1" selected>显示1</option>
<option value="2">显示2</option>
<option value="3">显示3</option>
<option value="4">显示4</option>
<option value="5">显示5</option>
</select>
</p>
<p>下面是根据列表选择分别显示对应的东西</p>
<table width="200" border="0" cellpadding="0" cellspacing="1" bgcolor="#0000FF">
<tr>
<td height="20" align="center" bgcolor="#FFFFFF"><strong>显示列表如下单元格的颜色不同</strong></td>
</tr>
<tr id="td1" style="display:'list-item'">
<td height="20" align="center" bgcolor="#FF0000">显示1的内容
<input type="text" name="textfield"></td>
</tr>
<tr id="td2" style="display:none">
<td height="20" align="center" bgcolor="#CCFF00">显示2的内容
<textarea name="textarea"></textarea></td>
</tr>
<tr id="td3" style="display:none">
<td height="20" align="center" bgcolor="#996600">显示3的内容
<input type="checkbox" name="checkbox" value="checkbox">
<input type="checkbox" name="checkbox" value="checkbox"></td>
</tr>
<tr id="td4" style="display:none">
<td height="20" align="center" bgcolor="#CC99CC">显示4的内容
<input type="radio" name="radiobutton" value="radiobutton">
<input type="radio" name="radiobutton" value="radiobutton"></td>
</tr>
<tr id="td5" style="display:none">
<td height="20" align="center" bgcolor="#66CCFF">显示5的内容
<input type="submit" name="Submit" value="提交"></td>
</tr>
</table>
<p> </p>
</form>
</body>
</html>