模拟层实现限制下拉框显示个数

来源：互联网发布：淘宝视频怎么下载编辑：程序博客网时间：2024/05/22 17:03

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script>
function showHide(obj){     //隐现层的函数
  sh={block:"none",none:"block"}
  //层的display属性值在"block"和"none"间不断轮换，
  //达到轮换隐藏和显示的效果
  oOption.runtimeStyle.display=sh[oOption.currentStyle.display]
}
</script>

<script event="onmouseover" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){//判断onmouseover事件是否发生在单元格上
  //设置事件发生所在的单元格的背景颜色
  obj.style.backgroundColor="#dedede"
  //设置事件发生所在的单元格的字体颜色
  obj.style.color="#FFFFFF"
}
</script>

<script event="onmouseout" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){        //判断onmouseout事件是否发生在单元格上
  //设置事件发生所在的单元格的背景颜色
  obj.style.backgroundColor="#FFFFFF"
  obj.style.color="#000000"//设置事件发生所在的单元格的字体颜色
}
</script>

<script event="onclick" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){ //判断onmouseover事件是否发生在单元格上
   showHide()        //隐藏层
   //设置id为oSelect的对象内的文本为被点击的单元格内的文本
   oSelect.innerText=obj.innerText
   //设置id为C_Select的对象内的值为被点击的
   //单元格的自定义属性value的值
   C_Select.value=obj.value
   //window.open(obj.value)                  //测试跳转菜单功能
   }
</script>
<style>
body,td{font-size:12px}
.over{color:#dedede}
.out{color:#333333}
#oOption{
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#C1C1BB;
scrollbar-highlight-color:#C1C1BB;
scrollbar-3dlight-color:#EBEBE4;
scrollbar-darkshadow-color:#EBEBE4;
scrollbar-track-color:#F4F4F0;
scrollbar-arrow-color:#CACAB7;
position:absolute;display:none;width:75px;height:80px;
overflow:scroll;overflow-x:hidden;
border:#333333 1px solid;border-top:none;cursor:default
}
</style>
</head>

<body>

</body>
</html>