基于Jquery的模拟Select下拉菜单

深藏阁楼爱情的钟 2022-09-26 03:48 161阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="jquery.min.js"></script>
    <style type="text/css">
    *{ margin:0; padding:0; list-style:none;}
    /*套在Select外层，用于隐藏Select框*/
    .selectContainer{position:relative; width:262px; display:inline-block; _display:inline; _zoom:1; z-index:1000; background:#FFF; border:1px solid #CCC}  
    .selectContainer input{}  
    .selectContainer .selectOption{min-width:180px; padding:0 5px; line-height:25px; height:25px; white-space:nowrap; overflow:hidden;border:none; width:250px; z-index:1000}  
    .selectContainer .shows{width:20px; height:20px; position:absolute; right:2px; top:2px; background:url(arrows.jpg) no-repeat center center}  
    .selectContainer ul{position:absolute; width:100%; top:25px; left:-1px; border-bottom:1px solid #CCC; display:none;}  
    .selectContainer ul li{padding:0 5px; border:1px solid #CCC; border-bottom:1px solid #EEE; border-top:none; line-height:25px; width:252px; background:#FFF; cursor:pointer}  
    .selectContainer ul li:hover{background:#F5F5F5}  
      
    .selectContainer ul.dis{display:block!important;}  
    .selectContainer ul.undis{display:noneimportant;}  
    .zIndex{z-index:10000!important}  
    .selectContainer .gray{color:#DDD}  
    </style>
    <script type="text/javascript">
    (function($){
        jQuery.fn.select = function(options){  
            return this.each(function(){  
                var $this = $(this);  
                var $shows = $this.find(".shows");  
                var $selectOption = $this.find(".selectOption");  
                var $el = $this.find("ul > li");  
                                          
                $this.click(function(e){  
                    $(this).toggleClass("zIndex");  
                    $(this).children("ul").toggleClass("dis");  
                    e.stopPropagation();  
                });  
                  
                $el.bind("click",function(){  
                    var $this_ = $(this);  
                       
                    $this.find("span").removeClass("gray");  
                    $this_.parent().parent().find(".selectOption").text($this_.text());  
                });  
                  
                $("body").bind("click",function(){  
                    $this.removeClass("zIndex");  
                    $this.find("ul").removeClass("dis");      
                })  
                  
            //eahc End    
            });  
              
        }  
    })(jQuery);  
    $(document).ready(function() {
    	$(".selectContainer").select(); 
    })
    </script>
    </head>
    
    <body>
    <div class="selectContainer">  
                <span class="selectOption gray">Please select aproduct</span>  
                <ul class="selectMenu">  
                    <li>江西省</li>  
                    <li>广东省</li>  
                    <li>江苏省</li>  
                    <li>河北省</li>  
                    <li>湖南省</li>  
                </ul>  
                <span class="shows"></span>  
     </div>  
    </body>
    </html>