模拟select的代码

186 阅读 0 评论 123 点赞

我是靠谱客的博主老实小懒猪，最近开发中收集的这篇文章主要介绍模拟select的代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

几年前不知道在哪下载的源码上改的，去年开始学jquery，就改了一下，代码有点乱。
只是自己用，没有考虑写成通用的组件，所以童鞋们如果真的要拿去用的话有点麻烦

几个状态，展开收起是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"); 
} 
}); 
}); 