我们都知道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。
分享到:
相关推荐
jQuery模拟Select下拉菜单选中添加代码是一款支持多选的下拉菜单选项选择插件,带搜索功能。
div+css打造select下拉菜单,可自己修改相应样式!!!
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
jQuery模拟select下拉框插件是一款支持多选和单选下拉框菜单选中代码。
用jquery模拟一淘上面的搜索下拉的功能,利用css3做箭头的动画效果。 JS代码: /* * 模拟搜索下拉select * 默认调用方式:$(el).setSelect({ * optionList: [], //这里是下拉的选项,如['aa','bb'] * hidden...
jquery搜索垂直模拟select下拉效果
jQuery模拟select下拉框三级城市联动代码.zip
CSS jQuery用ul模拟select下拉列表菜单效果,将表单中常用的Select列表框变换了样式,更加漂亮了,而且引入了jQuery,加上了动画效果,在下拉的时候,自动向下滑出,使Select不那么呆板了。
jquery input下拉菜单选中效果是一款基于jquery实现的模拟select下拉菜单选中效果代码。
jQuery下拉菜单选中添加代码是一款jQuery模拟Select下拉菜单多选条件,选中过滤搜索代码。
用jsTree+div模拟 js树形下拉菜单
jQuery输入框下拉选择菜单是一款jQuery模拟select下拉框分页菜单插件,点击输入框弹出下拉分页菜单选择列表,支持下拉,分页,键盘操作等功能代码。
摘要:脚本资源,jQuery,下拉列表,下拉菜单 CSS+jQuery用ul模拟select下拉列表菜单效果,将表单中常用的Select列表框变换了样式,更加漂亮了,而且引入了jQuery,加上了动画效果,在下拉的时候,自动向下滑出,使...
摘要:脚本资源,Ajax/JavaScript,Select 一个网页特效,对象是Select下拉框,div模拟select下拉菜单之选择不同的货币改变国旗,公司的B2C平台需要一个一个小小的重构,其中有个货币菜单是原生的select下拉菜单,需要...
jQuery输入框下拉选择菜单是一款jQuery模拟select下拉框分页菜单插件,点击输入框弹出下拉分页菜单选择列表,支持下拉,分页,键盘操作等功能代码。
主要介绍了jQuery实现非常实用漂亮的select下拉菜单选择效果,通过jQuery模拟select下拉选择效果,并具有点击选中下拉项进入输入框的功能,非常美观实用,需要的朋友可以参考下
jQuery下拉菜单选中添加代码是一款jQuery模拟Select下拉菜单多选条件,选中过滤搜索代码。
jQuery下拉菜单选中添加代码是一款jQuery模拟Select下拉菜单多选条件,选中过滤搜索代码。
jquery input下拉菜单选中效果是一款基于jquery实现的模拟select下拉菜单选中效果代码。