自定义下拉列表

马克社区

发布于 2022-04-14 17:05:36

2K0

发布于 2022-04-14 17:05:36

文章被收录于专栏：高端IT高端IT

自定义下拉列表，也就是点击一个选择框的时候，下面会弹出相对应的推荐的选项，再选择一个之后，选项的内容会填充到选择框里面。选项框随之消失。

首先我们先定义两个框，一个选择框，一个选项框，代码结构如下：

<div id="info">
        选择一个你最喜欢的游戏
    </div>
    <ul id="chose">
        <li>王者荣耀</li>
        <li>LOL</li>
        <li>吃鸡</li>
        <li>连连看</li>
        <li>冒险岛</li>
        <li>穿越火线</li>
        <li>地下城与勇士</li>
        <li>梦幻西游</li>
    </ul>

css样式这里就不说了，大家可以自己设计。

HTML结构写好之后，接下来就是通过JS代码来实现我们所需要的功能了。首先，选项框我们需要将其隐藏，也就是设置其display属性为none。

 $("#info").addEventListener("click",function(e){
            e = e || event;
            e.stopPropagation();
            $("#chose").style.display = "block";
        });
 
        $("#chose").addEventListener("click",function(e){
            e = e || event;
            var src = e.target || e.srcElement;
            $("#info").innerHTML = src.innerHTML;
            $("#info").style.color = "black";
            $("#chose").style.display = "none";
        });
 
        document.onclick = function(){
            $("#chose").style.display = "none";
        };

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118567650

本文系转载，前往查看

如有侵权，请联系?cloudcommunity@tencent.com 删除。

前端性能监控