自定义下拉框实现
实现思路：
(1)创建一个列表和一个span之类的标签（那个标签都可以），
(2)列表的每一项分别绑定点击事件，点击那一项就把span内容变为改那一项内容，然后隐藏列表。
(3)列表要先隐藏，点击span标签再让它显示，什么都不选时点击document隐藏列表。
(4)键盘上的按键都有各自的键码，通过这个键码可以来判断按下的是哪个键来执行相应的操作，下面函数可以获取键盘的键码
document.addEventListener("keyup",function(e){
console.log(e.keyCode)
})
核心代码：键盘上的向上，向下，enter键触发的内容
//键盘按下事件 document.addEventListener("keyup",function(e){ var e=e||window.e; reset() //向上键 if(e.keyCode=="38"){ index--; if(index<0){ index=list.length-1 } } //向下键 if(e.keyCode=="40"){ index++; if(index>list.length-1){ index=0 } } //enter确认键 if(e.keyCode=="13"){ cite.innerHTML=list[index].innerHTML; ul.style.display="none"; return ; } list[index].className="bg"; })
全部代码：
<!doctype html> <html lang="en"> <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 { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } .divselect cite { width: 150px; height: 24px; line-height: 24px; display: block; color: #807a62; cursor: pointer; font-style: normal; padding-left: 4px; padding-right: 30px; border: 1px solid #333333; } .divselect ul { width: 184px; border: 1px solid #333333; background-color: #ffffff; position: absolute; z-index: 20000; margin-top: -1px; display: none; } .divselect ul li { height: 24px; line-height: 24px; } .divselect ul li a { display: block; height: 24px; color: #333333; text-decoration: none; padding-left: 10px; padding-right: 10px; } .divselect ul li:hover{ background: #eee; } .bg{ background: #eee; } </style> </head> <body> <div class="divselect"> <span>请点击选择分类</span> <ul> <li> <a href="javascript:;">ASP开发</a> </li> <li> <a href="javascript:;">.NET开发</a> </li> <li> <a href="javascript:;">PHP开发</a> </li> <li> <a href="javascript:;">Javascript开发</a> </li> <li> <a href="javascript:;">Java特效</a> </li> </ul> </div> <script type="text/javascript"> var cite=document.querySelector("span"),//选择的内容 ul=document.querySelector("ul"),//列表 list=document.querySelectorAll("a"),//选择项 index=-1;//索引 //点击列表显示 cite.addEventListener("click",function(e){ var e=e||window.e; e.stopPropagation();//阻止冒泡防止触发document上绑定的隐藏事件 ul.style.display="block"; }) //给每个列表项绑定点击 for(var i=0;i<list.length;i++){ list[i].onclick=function(){ cite.innerHTML=this.innerHTML; ul.style.display="none";//这里隐藏可以不写，不写冒泡到document上触发document上的隐藏事件 } } //键盘按下事件 document.addEventListener("keyup",function(e){ var e=e||window.e; reset() //向上键 if(e.keyCode=="38"){ index--; if(index<0){ index=list.length-1 } } //向下键 if(e.keyCode=="40"){ index++; if(index>list.length-1){ index=0 } } //enter确认键 if(e.keyCode=="13"){ cite.innerHTML=list[index].innerHTML; ul.style.display="none"; return ; } list[index].className="bg"; }) //未选择时点击document隐藏 document.addEventListener("click",function(){ ul.style.display="none"; }) //样式重置 function reset(){ for(var i=0;i<list.length;i++){ list[i].className=""; } } </script> </body> </html>
