jQuery自定义select下拉框（一）

最新推荐文章于 2025-06-03 09:12:08 发布

原创最新推荐文章于 2025-06-03 09:12:08 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #select

jQuery 同时被 2 个专栏收录

6 篇文章

订阅专栏

select

2 篇文章

订阅专栏

本文介绍了如何使用jQuery自定义select下拉框，通过HTML、JS和CSS代码示例展示实现过程，包括jQuery的选择器和事件应用。

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

自定义select下拉框以满足项目的需求
直接上代码
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selector</title>
    <link href="./css/selector.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="selector">
    <div id="selected">
        <span id="sex" value="">请选择</span>
        <div id="arrowBotton"><img src="./images/arrow_bot.png"></div>
    </div>
    <ul class="ul">
        <li value="man">男</li>
        <li value="woman">女</li>
    </ul>
</div>
<script src="./js/lib/jquery-1.8.2.min.js"></script>
<script src="./js/selector.js"></script>
</body>
</html>

(function($){
    $(document).ready(function(){
        $("#selected").click(function(){
            $(".ul").show();
        });
        $("#selector, .ul").mouseleave(function(){
            $(".ul").hide();
        });
    });

    $(".ul li").click(function () {
        $("#sex").html($(this).html())
                     .attr("value",$(this).attr("value"));

        $(".ul").css("display","none");
    })

})(jQuery)

css

#selector{
    max-width: 500px;
    margin: 100px auto;
    padding: 20px;
}
.ul{
    display: none;
    list-style: none;
    margin: -2px 0 0;
    padding: 5px 0;
    border: 1px solid #313b94;
    border-top: 0;
}
.ul li{
    display: block;
    padding: 2px 5px;
    color: #000;
    text-decoration: none;
}
.ul li:hover{
    background-color: rgba(243, 229, 229, 0.678);
    color: #000;
}
#selected{
    position: relative;
    border: 1px solid #313b94;
    display: -webkit-flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    padding: 0 1px;
}
#arrowBotton{
    border-left:1px solid #313b94
}
#arrowBotton>img{
    height: 100%;;
}

效果
在这里插入图片描述

note

css 选择器
selector1,selectorN --> 群组选择器–> 将每一个选择器匹配的元素集合并
E F -->后代选择器（包含选择器）–>选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F–>子选择器–>选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
jQuery 选择器
parent > child–> $(“div > p”)–>
元素的直接子元素的所有
元素
3.jQuery 事件