div+ul 模拟select下拉

最新推荐文章于 2025-06-25 13:14:13 发布

我是我家小女孩

最新推荐文章于 2025-06-25 13:14:13 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

我是我家小女孩@khuntoria

本文链接：https://blog.youkuaiyun.com/SQY_candy/article/details/84892698

本文详细讲解如何利用HTML的div和ul元素，结合JavaScript或CSS，模拟实现Select下拉选择的功能。通过这种方法，可以自定义下拉框的样式，并具有更好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    input{
        width: 100px;
        height: 30px;
        text-indent: 1em;
        font-size: 16px;
    }
div{
    width: 100px;
    /* background-color: pink; */
    height: 179px;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    border:1px solid #9E9E9E
}


ul{
    margin: 0;
    padding: 0;
    
}

li{
    list-style-type: none;
    height: 33px;
    line-height: 33px;
    text-align: center;
    color: #000;
    font-size:16px;
  
    /* margin-bottom: 10px; */
}

.bgc{
    background-color: #ff33ff;
}

li:hover{
    background-color: pink;
}



.triangle_border_down{
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #9E9E9E transparent transparent;
    position: absolute;
    display: inline-block;
    left: 91px;
    top: 22px;
}

</style>

<script type="text/javascript">  
$(  
    function(){  
        $("#lang").click(function(){  
            if("block" == $("#huangbiao").css("display")){  
                hideLi();  
            }else{  
                showLi();  
            }  
        });  
          
        $("li").each(function(i,v){  
            $(this).click(function(){  
                $("#lang").val($(this).html());  
                $("#lang").attr("value",$(this).attr('value'))
                $(this).addClass('bgc').siblings().removeClass('bgc');
                hideLi();  
            });  
        });  
          
        $("#lang").blur(function(){  
            setTimeout(hideLi,200);  
        });          
    }      
);
  
function showLi(){  
    $("#huangbiao").show();  
}  
function hideLi(){  
    $("#huangbiao").hide();  
}
</script>

 <input type="text" id="lang" class="input" value="" readonly="readonly" placeholder="请输入"/>      <span class="triangle_border_down"> </span>
    <DIV style="" id="huangbiao">  
        <ul>  
            <li value="111">dddd</li>  
            <li value="222">ssss</li>  
        </ul>  
    </DIV>