jquery模拟select下拉菜单实例

发布时间:2019-08-03编辑:脚本学堂
本文介绍了jquery模拟select下拉菜单的一个例子,有需要的朋友参考下。

select 通过css不好控制,可以使用javascript+css来模拟。

脚本小编为大家收集了一个jquery模拟select下拉菜单的例子,大家可以借鉴下别人的经验。

1,html部分
 

复制代码 代码示例:
<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> 
 

2,css代码部分
 

复制代码 代码示例:
/* ---- 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} 

3,js脚本部分
 

复制代码 代码示例:

(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);  
 
//调用
$(".selectcontainer").select(); 
 

实现模拟select效果,网页中select数量不限,需要导入jquery.js。