本文介绍如何使用 JavaScript 实现一个自定义下拉框。通过监听点击事件切换显示状态，并结合 keyup 事件处理键盘上下键及 Enter 键的导航逻辑，实现无依赖的轻量级交互组件。
JavaScript 自定义下拉框实现概述
本文分享了一段使用 JavaScript 实现自定义下拉框的完整代码示例，供开发者参考与学习。
核心实现思路与交互逻辑
实现该功能的核心思路如下：
首先，构建一个列表元素以及一个用于显示选中内容的标签（如 span），具体标签类型可根据需求调整。
其次，为列表中的每一项绑定点击事件。当用户点击某一项时，将显示标签的内容更新为该项内容，并隐藏列表。
初始状态下列表应处于隐藏状态。当用户点击显示标签时，列表变为可见；若未选择任何项且点击页面其他区域（document），则隐藏列表。
此外，利用键盘事件处理导航逻辑。每个按键对应特定的键码，通过判断键码可执行相应操作，以下函数用于获取键盘按键的键码值。
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>以上内容为本文的全部介绍，希望能为读者提供有益的帮助，欢迎继续支持本站获取更多技术分享。