js实现自定义下拉框
本文实例为大家分享了js实现自定义下拉框的具体代码，供大家参考，具体内容如下 实现思路： (1)创建一个列表和一个span之类的标签（那个标签都可以）， (2)列表的每一项分别绑定点击事件，点击那一项就把span内容变为改那一项内容，然后隐藏列表。 (3)列表要先隐藏，点击span标签再让它显示，什么都不选时点击document隐藏列表。 (4)键盘上的按键都有各自的键码，通过这个键码可以来判断按下的是哪个键来执行相应的操作，下面函数可以获取键盘的键码 document.addEventListener("keyup",function(e){
### JavaScript 实现自定义下拉框
在网页交互设计中，下拉框是非常常见的一个元素。它可以有效地利用有限的空间展示更多的选项，同时提供一个简洁、直观的用户界面。本篇文章将详细解析如何使用 JavaScript 来实现一个自定义的下拉框，并通过具体的代码示例进行说明。
#### 实现思路
实现一个自定义的下拉框主要分为以下几个步骤：
1. **创建必要的HTML结构**：
- 创建一个用于显示当前选中项的`span`标签。
- 创建一个包含多个选项的`ul`标签。
2. **绑定事件处理程序**：
- 为`span`标签绑定点击事件，当点击该标签时显示或隐藏下拉列表。
- 为`ul`中的每个`li`元素绑定点击事件，当点击某一项时更新`span`的内容并隐藏列表。
3. **键盘事件处理**：
- 使用`document.addEventListener("keyup", function(e))`监听键盘事件。
- 根据键码判断用户的操作，比如使用上下箭头键在选项之间切换，回车键确定选择。
#### 核心代码解析
接下来，我们将对上述实现思路中的核心代码进行详细的分析。
```html
<!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 id="dropdown-list">
<li><a href="#">ASP开发</a></li>
<li><a href="#">.NET开发</a></li>
<li><a href="#">PHP开发</a></li>
<li><a href="#">JavaScript开发</a></li>
<li><a href="#">Java特效</a></li>
</ul>
</div>
<script type="text/javascript">
var cite = document.querySelector("span"), // 显示内容的 span 元素
ul = document.querySelector("ul"), // 下拉列表
list = document.querySelectorAll("a"), // 选项
index = 0; // 当前选中的索引
function reset() {
for (var i = 0; i < list.length; i++) {
list[i].classList.remove("bg");
}
}
// 点击 span 时显示或隐藏列表
cite.addEventListener("click", function() {
ul.style.display = ul.style.display === "block" ? "none" : "block";
});
// 为列表中的每个选项绑定点击事件
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click", function() {
cite.innerHTML = this.textContent;
ul.style.display = "none";
});
}
// 键盘事件处理
document.addEventListener("keyup", function(e) {
e = e || window.event;
reset();
if (e.keyCode === 38) { // 向上键
index--;
if (index < 0) {
index = list.length - 1;
}
} else if (e.keyCode === 40) { // 向下键
index++;
if (index > list.length - 1) {
index = 0;
}
} else if (e.keyCode === 13) { // 回车键
cite.innerHTML = list[index].textContent;
ul.style.display = "none";
return;
}
list[index].classList.add("bg");
});
// 当点击文档其他地方时隐藏列表
document.addEventListener("click", function(event) {
var target = event.target;
if (!target.closest('.divselect')) {
ul.style.display = 'none';
}
});
</script>
</body>
</html>
```
### 代码详解
1. **HTML 结构**：
- `<span>`：用来显示当前选中的文本。
- `<ul>`：包含所有可选项。
- `<li>`：每个列表项代表一个可选项。
2. **CSS 样式**：
- 设置基本样式，如边距、内边距等。
- 通过`hover`状态改变背景色，增强用户体验。
3. **JavaScript 逻辑**：
- 选择元素：`cite`、`ul`和`list`。
- 事件监听器：为`cite`绑定点击事件，实现列表的显示与隐藏；为`list`中的每个元素绑定点击事件，实现选项的更改及列表的隐藏。
- 键盘事件处理：使用`keyCode`判断用户按下的键，从而控制选项的切换和确认选择。
通过上述代码和分析，我们可以清晰地了解到如何使用 JavaScript 来实现一个功能完整且具有良好用户体验的自定义下拉框。这对于前端开发者来说是一个非常实用的技术点。
