js Implementation Custom Drop down Box
- 2021-12-04 17:57:05
- OfStack
In this article, we share the specific code of js to realize custom drop-down box for your reference. The specific contents are as follows
Implementation ideas:
(1) Create a list and a tag like span (either tag will do),
(2) Each item in the list is bound with a click event. Click on that item to change span content into that item, and then hide the list.
(3) The list should be hidden first. Click span tab and then let it show. Click document to hide the list when nothing is selected.
(4) The keys on the keyboard all have their own key codes, which key can be judged by this key code to execute the corresponding operation. The following function can obtain the key code of the keyboard
document.addEventListener("keyup",function(e){
console.log(e.keyCode)
})Core code: keyboard up, down, enter key trigger content
// Keyboard press event
document.addEventListener("keyup",function(e){
var e=e||window.e;
reset()
// UP key
if(e.keyCode=="38"){
index--;
if(index<0){
index=list.length-1
}
}
// Down key
if(e.keyCode=="40"){
index++;
if(index>list.length-1){
index=0
}
}
//enter Confirm key
if(e.keyCode=="13"){
cite.innerHTML=list[index].innerHTML;
ul.style.display="none";
return ;
}
list[index].className="bg";
})All codes:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Drop-down menu </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> Please click to select a category </span>
<ul>
<li>
<a href="javascript:;">ASP Development </a>
</li>
<li>
<a href="javascript:;">.NET Development </a>
</li>
<li>
<a href="javascript:;">PHP Development </a>
</li>
<li>
<a href="javascript:;">Javascript Development </a>
</li>
<li>
<a href="javascript:;">Java Special effects </a>
</li>
</ul>
</div>
<script type="text/javascript">
var cite=document.querySelector("span"),// Selected content
ul=document.querySelector("ul"),// List
list=document.querySelectorAll("a"),// Options
index=-1;// Index
// Click list display
cite.addEventListener("click",function(e){
var e=e||window.e;
e.stopPropagation();// Prevent bubbling and prevent triggering document Hidden events bound on
ul.style.display="block";
})
// Bind each list item and click
for(var i=0;i<list.length;i++){
list[i].onclick=function(){
cite.innerHTML=this.innerHTML;
ul.style.display="none";// Hidden here can not be written, not written bubbling to document Trigger up document Hidden events on
}
}
// Keyboard press event
document.addEventListener("keyup",function(e){
var e=e||window.e;
reset()
// UP key
if(e.keyCode=="38"){
index--;
if(index<0){
index=list.length-1
}
}
// Down key
if(e.keyCode=="40"){
index++;
if(index>list.length-1){
index=0
}
}
//enter Confirm key
if(e.keyCode=="13"){
cite.innerHTML=list[index].innerHTML;
ul.style.display="none";
return ;
}
list[index].className="bg";
})
// Click when not selected document Hide
document.addEventListener("click",function(){
ul.style.display="none";
})
// Style reset
function reset(){
for(var i=0;i<list.length;i++){
list[i].className="";
}
}
</script>
</body>
</html>