<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表</title>
<style type="text/css">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
#divselect{
position:relative;
width:200px;
color:#a19595;
margin:0px auto;
z-index:10000;
}
#divselect cite {
width:180px;
height:30px;
line-height:30px;
color:#a19595;
cursor:pointer;
display:block;
border:1px solid black;
padding-left:2px;
padding-bottom:5px;
}
#divselect ul{position:absolute;
z-index:20000;
width:182px;line-height:30px;
margin-top:-1px;
background-color:#fff;
border:1px solid #333333;
display:none;
}
#divselect ul li{height:20px;line-height:20px;}
a{text-decoration:none;diaplay:block;
height:24px;
color:#333333;
padding-right:5px;
padding-left:5px;
}
</style>
<script type="text/javascript" >
window.onload=function(){
var box=document.getElementById('divselect'),
title=box.getElementsByTagName('cite')[0],
menu=box.getElementsByTagName('ul')[0],
as=box.getElementsByTagName('a'),
index=-1;
// 点击三角时
title.onclick=function(event){
event=event||window.event;
if(event.stopProgation){event.stopProgation();}
else{event.cancelBubble=true;} // 执行脚本
//jp
menu.style.display="block";
//键盘事件未能成功调用//
document.onkeyup=function(event){
event=event||window.event;
if(event.keyCode==13){
for(var i=0;i<as.length;i++){
as[i].style.background="#fff";
}
title.innerHTML=as[index].innerHTML;
menu.style.display="none";
}
if(evnet.keyCode==40){
index++;
if(index>=as.length){index=0;}
for(var i=0;i<as.length;i++){
as[i].style.background="#ccc";
}
as[index].style.background="#fff";
}
else if(event.keyCode==38){
index--;
if(index<0) index=as.length-1;
for(var i=0;i<as.length;i++){
as[i].style.background="#fff";
}
as[index].style.background="#ccc";
}
}
}
//mouse
for(var i=0;i<as.length;i++){
as[i].num=i;
as[i].onmousemove=function(){
this.style.background="#fff";
index=as[i].num-1;
}
as[i].onmouseout=function(){
this.style.background="#9a9a9a";
}
as[i].onclick=function(event){
event=event||window.event;
if(event.stopProgation){event.stopProgation();}
else{event.cancelBubble=true;}
menu.style.display="none";
title.innerHTML=this.innerHTML;
}
}
document.onclick=function(){
menu.style.display="none";
}
//点击空白处
}
</script>
</head>
<body>
<div id="divselect">
<cite>请选择分类</cite>
<ul>
<li id="li"> <a href="javascript:;" selectid="1">ASP开发</a></li>
<li><a href="javascript:;" selectid="2">.NET开发</a></li>
<li><a href="javascript:;" selectid="3">PHP开发</a></li>
<li><a href="javascript:;" selectid="4">Javascript开发</a></li>
<li><a href="javascript:;" selectid="5">Java特效</a></li>
</ul>
</div>
</body>
</html>鼠标--代码错误：event.stopPropagation