怎么新建MySQL数据库
发布时间：2022-06-18
作者：admin
阅读：285
阅读：285
这篇文章给大家分享的是用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>以上就是关于“用JS实现自定义下拉的思路及代码是什么”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理