楼上正解,使用display属性，用js控制,例如
object.style.display="none" //隐藏对象,object为对象，可以用document.getElementById来获得,
object.style.display="block" //显示对象
object.style.display="none" //隐藏对象,object为对象，可以用document.getElementById来获得,
object.style.display="block" //显示对象
具体的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var prediv="";
function showKind()
{
var e=document.form1.myselect.options[document.form1.myselect.selectedIndex].value;
if(prediv!="")
{
eval("document.getElementById('"+prediv+"').style.display='none'");
eval("document.getElementById('"+e+"').style.display='block'");
prediv=e;
}
else
{
eval("document.getElementById('"+e+"').style.display='block'");
prediv=e;
}
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name="form1">
<SELECT id="myselect" onchange="showKind()">
<option value="">请选择</option>
<option value="fruit">水果</option>
<option value="hobby">爱好</option>
<option value="book">喜欢的书脊</option>
</SELECT><div id="mydiv" style="position:absolute;left:10;top:50;border:1 solid red;width:300;height:200;background-color:#cccccc">
<div id="fruit" style="position:relative;left:0;top:10;display:none">
<INPUT TYPE="checkbox" NAME="1">苹果 <INPUT TYPE="checkbox" NAME="1">西瓜 <INPUT TYPE="checkbox" NAME="1">番茄
</div>
<div id="hobby" style="position:relative;left:0;top:10;display:none">
<INPUT TYPE="checkbox" NAME="1">打篮球<INPUT TYPE="checkbox" NAME="1">游泳 <INPUT TYPE="checkbox" NAME="1">高二伏
</div>
<div id="book" style="position:relative;left:0;top:10;display:none">
<INPUT TYPE="checkbox" NAME="1">电脑书籍 <INPUT TYPE="checkbox" NAME="1">杂志 <INPUT TYPE="checkbox" NAME="1">程序
</div></div>
</FORM>
</BODY>
</HTML>