jquery模拟select下拉菜单实例
select 通过css不好控制,可以使用javascript+css来模拟。
脚本小编为大家收集了一个jquery模拟select下拉菜单的例子,大家可以借鉴下别人的经验。
1,html部分
<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代码部分
.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。
您可能感兴趣的文章:
jquery模拟select下拉菜单实例
Jquery联动下拉菜单实现代码
jQuery菜单插件 Smooth Navigational Menu
7款风格新颖的jQuery/CSS3菜单导航分享
jquery-easyui创建下拉菜单的例子
Click Menu
用jQuery实现的模拟下拉框代码
Jquery操作select的小例子
jquery模拟SELECT下拉框取值效果
jquery下拉菜单 ul标签下拉菜单的例子