只是自己用,没有考虑写成通用的组件,所以童鞋们如果真的要拿去用的话有点麻烦
几个状态,展开收起是jquery的slide
这个模拟select,只是很简单的实现了单独一个select的部分功能
没有实现比如optgroup,文字长度自适应(图片会因此修改麻烦)
再说如果页面多个select,css处理也麻烦,
数据、联动都要增加大量代码
小有小的好处,所以就不考虑进行封装,
这里有不少童鞋做的比我好很多,功能很强大
再所以,就偷一下懒,在这里送上js注释给初学者
复制代码 代码如下:
$(document).ready(function(){
var newselect = $(#aa);
newselect.click(function(e){
//如果没有class,即关闭状态,就展开
//打开状态就不需要处理,冒泡执行document.click
if(this.classname == ){
this.classname = open;
$(this.nextsibling).slidedown(fast);
e.stoppropagation();//阻止冒泡
}
});
//关闭收起
function closeselect(obj){
$(obj.nextsibling).slideup(fast,function(){
obj.classname = ;
});
}
$(document).bind(click, function() {
closeselect(newselect[0]);
});
newselect.next().click(function(e){
var src = e.target;
//如果有选中任何一项,取选中文字执行替换操作并改变样式,相当于select.onchange
//冒泡执行document.click关闭收起
if(src.tagname == a){
var pobj = src.parentnode;
pobj.previoussibling.innerhtml = src.innerhtml;
$(src).siblings().removeclass();
src.classname = current;
pobj.nextsibling.value = src.getattribute(value);
}
});
});
演示地址:http://demo.jb51.net/js/2011/jquery_select/
打包下载:http://www.jb51.net/jiaoben/39490.html
