js實現(xiàn)自定義下拉框

更新時間：2021年11月08日 10:05:17 作者：雪旭

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)自定義下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)自定義下拉框的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)思路：

(1)創(chuàng)建一個列表和一個span之類的標(biāo)簽（那個標(biāo)簽都可以），

(2)列表的每一項分別綁定點(diǎn)擊事件，點(diǎn)擊那一項就把span內(nèi)容變?yōu)楦哪且豁梼?nèi)容，然后隱藏列表。

(3)列表要先隱藏，點(diǎn)擊span標(biāo)簽再讓它顯示，什么都不選時點(diǎn)擊document隱藏列表。

(4)鍵盤上的按鍵都有各自的鍵碼，通過這個鍵碼可以來判斷按下的是哪個鍵來執(zhí)行相應(yīng)的操作，下面函數(shù)可以獲取鍵盤的鍵碼

document.addEventListener("keyup",function(e){
                console.log(e.keyCode)
})

核心代碼：鍵盤上的向上，向下，enter鍵觸發(fā)的內(nèi)容

//鍵盤按下事件
    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確認(rèn)鍵
                    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>請點(diǎn)擊選擇分類</span>
            <ul>
                <li>
                    <a href="javascript:;">ASP開發(fā)</a>
                </li>
                <li>
                    <a href="javascript:;">.NET開發(fā)</a>
                </li>
                <li>
                    <a href="javascript:;">PHP開發(fā)</a>
                </li>
                <li>
                    <a href="javascript:;">Javascript開發(fā)</a>
                </li>
                <li>
                    <a href="javascript:;">Java特效</a>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var cite=document.querySelector("span"),//選擇的內(nèi)容
                ul=document.querySelector("ul"),//列表
                list=document.querySelectorAll("a"),//選擇項
                index=-1;//索引
                //點(diǎn)擊列表顯示
                cite.addEventListener("click",function(e){
                    var e=e||window.e;
                    e.stopPropagation();//阻止冒泡防止觸發(fā)document上綁定的隱藏事件
                    ul.style.display="block";
                })
                //給每個列表項綁定點(diǎn)擊
                for(var i=0;i<list.length;i++){
                    list[i].onclick=function(){
                        cite.innerHTML=this.innerHTML;    
                        ul.style.display="none";//這里隱藏可以不寫，不寫冒泡到document上觸發(fā)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確認(rèn)鍵
                    if(e.keyCode=="13"){
                        cite.innerHTML=list[index].innerHTML;    
                        ul.style.display="none";    
                        return ;
                    }
                    list[index].className="bg";
                    
                })
                //未選擇時點(diǎn)擊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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: