模拟下拉框效果

最新推荐文章于 2023-03-30 18:27:33 发布

酷jjs

最新推荐文章于 2023-03-30 18:27:33 发布

阅读量427

点赞数

分类专栏：前端笔记 jquery 组件文章标签：组件

本文链接：https://blog.csdn.net/qq_32584661/article/details/70209883

版权

前端笔记同时被 3 个专栏收录

165 篇文章 2 订阅

订阅专栏

jquery

32 篇文章 0 订阅

订阅专栏

组件

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟下拉框</title>
    <script src="js/jquery.min.js"></script>
    <style>

        *{padding:0;margin:0;}
        li{list-style:none;}
        input{outline: none;}

        .select {width:200px;height: 30px;position: relative;margin:100px;  font-size:12px;}
        .select_input{width:200px;height: 30px;line-height:30px;text-indent:10px;
          border:1px solid #cccccc;}

        .select_btn{width:20px;height:30px;background:url("img/sel.png") no-repeat 6px 11px;
            display:block;right:0px;top:0px;position: absolute;cursor:pointer; }

        .select_ul{background:#333333;color:#ffffff;
            padding:10px;border-radius:6px;z-index:20;position:absolute;right:0;
            top:30px;display: none;}
        .select_li{line-height:26px;height:26px;width:180px;border-bottom:2px solid #ffffff;cursor:pointer; }

        .select_li:last-of-type{border-bottom:0;}

    </style>
</head>
<body>


    <div class="select">

        <input type="text" class="select_input">
        <span class="select_btn"></span>
        <ul class="select_ul">
            <li class="select_li select_checked">杭州技有限公司1</li>
            <li class="select_li">杭州有限公司2</li>
            <li class="select_li">杭州科技有限公司3</li>
            <li class="select_li">杭州技有限公司5</li>
            <li class="select_li">杭州技有限公司6</li>
        </ul>

    </div>


<script>

    $(function(){

        selModel(".select");


        function selModel(idid) {

            $(idid).bind("click",".select_btn",function () {
                $(".select_ul").slideToggle(300);
            });

            optCheck(idid);  //对应checked值显示


            $(idid).bind("click",".select_li",function (event) {
                var $target = $(event.target);
                $(event.target).addClass("select_checked").siblings().removeClass("select_checked");
                optCheck(idid);  //对应checked值显示
            })


            function optCheck(id){
                var optCheck=$(id).find(".select_checked").text();
                $(id).find(".select_input").val(optCheck);
            }


        }





    })


</script>



</body>
</html>