欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

基于Jquery的模拟Select下拉菜单

程序员文章站 2022-06-20 10:41:27
...

我们都知道Select 通过CSS不好控制,大部分网站开发人员都使用Javascript+CSS来模拟:

 

 

<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>

 

/* ---- 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(images/select-ico.gif) 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}

 

 

(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); 
 

 

//调用的时候这样,这是基本Jquery开发的插件
$(".selectContainer").select();
 

 

这样就可以实现模拟select效果,网页中Select数量不限,当然还需要导入Jquery.js。