js实现自定义下拉框
作者：雪旭
这篇文章主要为大家详细介绍了js实现自定义下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现自定义下拉框的具体代码，供大家参考，具体内容如下
实现思路：
(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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。