js implements custom drop-down box

This article example shares the specific code of js to implement a custom drop-down box for your reference. The specific content is as follows

Implementation ideas:

(1) Create a list and a span tag (any tag will do).

(2) Bind a click event to each item in the list. When you click an item, the span content changes to that item's content, and then hide the list.

(3) To hide the list first, click the span tag to display it. If nothing is selected, click document to hide the list.

(4) Each key on the keyboard has its own key code. This key code can be used to determine which key is pressed to perform 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: content triggered by the up, down, and enter keys on the keyboard

//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 keyif(e.keyCode=="40"){
                        index++;
                        if(index>list.length-1){
                            index=0
                        }
                    }
                    //enter confirmation keyif(e.keyCode=="13"){
                        cite.innerHTML=list[index].innerHTML;    
                        ul.style.display="none";    
                        return ;
                    }
                    list[index].className="bg";
                    
})

Full code:

<!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 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"), //Selected item index = -1; //Index //Click the list to display cite.addEventListener ("click", function (e) {
                    var e=e||window.e;
                    e.stopPropagation(); //Stop bubbling to prevent triggering hidden events bound to document ul.style.display="block";
                })
                //Bind click to each list item for(var i=0;i<list.length;i++){
                    list[i].onclick=function(){
                        cite.innerHTML=this.innerHTML;    
                        ul.style.display="none"; //You don't need to write "hide" here. If you don't write "hide", it will bubble up to the document and trigger the hide event on the document}
                }
                //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 keyif(e.keyCode=="40"){
                        index++;
                        if(index>list.length-1){
                            index=0
                        }
                    }
                    //enter confirmation keyif(e.keyCode=="13"){
                        cite.innerHTML=list[index].innerHTML;    
                        ul.style.display="none";    
                        return ;
                    }
                    list[index].className="bg";
                    
                })
                //Click the document to hide when it is not selected 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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js implements real-time search and real-time matching in a drop-down box with search function
Example of getting the selected value of the select drop-down box using jQuery and native JS
JS realizes dynamic addition of drop-down box (with effects)
Select cascading drop-down box example in Vue.js 2.0
JavaScript realizes the three-level linkage drop-down box menu of provinces, cities and districts
Select2.js drop-down box usage summary
The drop-down box tree effect implemented by ComboBoxTree in Extjs (self-written)
Example sharing of javascript drop-down box option click event
js method to realize the input function of Select drop-down box
Province, city and district three-level linkage drop-down box menu javascript version

<<: Getting Started Guide to MySQL Sharding

>>: IE8 Beta 1 has two areas that require your attention