原创文章-转载务必保留出处：Heluyao's Blog
效果请看此处：
这个可重复的版本原理与之前简单版的相同，只是在事件触发的方式上又比较大的出入。如果你目前只需要美化简单的页面(一个页面内仅仅只美化一个select)，那么完全可以使用简单版的代码 — 美化单个select下拉框，那样更节省成本，管理起来也较方便,当然也可以使用这个代码，以便日后的布局变化。由于本人到能力有限，代码可能还有不完善的地方，请见谅！有任何问题欢迎通过评论方式相互交流!
<script type="text/javascript"><!--
DOMhelp={
addEvent: function(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
},
closestSibling:function(node,direction){
var tempObj;
if(direction==-1 && node.previousSibling!=null){
tempObj=node.previousSibling;
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
tempObj=tempObj.previousSibling;
}
}else if(direction==1 && node.nextSibling!=null){
tempObj=node.nextSibling;
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
tempObj=tempObj.nextSibling;
}
}
return tempObj.nodeType==1?tempObj:false;
},
cssjs:function(a,o,c1,c2){
switch (a){
case 'swap':
o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
break;
case 'add':
if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
break;
case 'remove':
var rep=o.className.match(' '+c1)?' '+c1:c1;
o.className=o.className.replace(rep,'');
break;
case 'check':
var found=false;
var temparray=o.className.split(' ');
for(var i=0;i<temparray.length;i++){
if(temparray[i]==c1){found=true;}
}
return found;
break;
}
}
}
function goSelect(e){
if(!document.getElementById || !document.createTextNode) return false;
if(!DOMhelp.cssjs('check',e,'searchtype')){ return false;}
var ul = DOMhelp.closestSibling(e,1);
var li = ul.getElementsByTagName('li');
e.onclick = function(){
ul.style.display = 'block';
}
var timeId;
ul.onmouseout = function(){
timeId= setTimeout(function(){ul.style.display = 'none';},500);
}
ul.onmouseover = function(){ clearTimeout(timeId);}
for(var j=0;j<li.length;j++){
li[j].onclick = function(){
var testElement = this.getElementsByTagName('a')[0];
if(testElement.firstChild.nodeType == 3){
var text = testElement.firstChild.nodeValue;
}
e.value=text;
ul.style.display='none';
return false;
}
}
}
function init_select(){
var s = document.getElementsByTagName('input');
for(var i=0;i<s.length;i++){
goSelect(s[i]);
}
}
DOMhelp.addEvent(window, 'load', init_select, false);
--></script>