• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js实现自定义下拉框

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
js实现上传图片功能发布时间:2022-02-05
下一篇:
Vue状态管理之使用Pinia代替Vuex发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap