用javascript和css模拟select的脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>模拟 美化 select_管理资源吧</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20zQuery%3Dfunction(ele%2CtagName%2CclassName)%7B%20%2F%2F%E6%A0%B8%E5%BF%83%E5%AF%B9%E8%B1%A1%20%0D%0A%20%20%20%20if%20(%20window%20%3D%3D%20this%20)%20return%20new%20zQuery(ele%2CtagName%2CclassName)%3B%20%0D%0A%20%20%20%20if(!arr)%7Bvar%20arr%3Dnew%20Array%3B%7D%20%0D%0A%20%20%20%20if(ele)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(ele.constructor!%3DzQuery)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20elem%3Dtypeof(ele)%3D%3D%22object%22%3Fele%3Adocument.getElementById(ele)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!tagName)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr.push(elem)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20tags%3Delem.all%26%26!window.opera%3FtagName%3D%3D%22*%22%3Felem.all%3Aelem.all.tags(tagName)%3Aelem.getElementsByTagName(tagName)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(!className)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(var%20i%3D0%2C%20l%3Dtags.length%3B%20i%3Cl%3B%20i%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr.push(tags%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20reClassName%3DRegExp(%22(%5E%7C%5C%5Cs%2B)%22%2BclassName%2B%22(%24%7C%5C%5Cs%2B)%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(var%20i%3D0%2C%20l%3Dtags.length%3B%20i%3Cl%3B%20i%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(reClassName.test(tags%5Bi%5D.className))%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr.push(tags%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for(var%20i%3D0%2C%20l%3Dele.length%3B%20i%3Cl%3B%20i%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr%3Darr.concat(Array.prototype.slice.call(zQuery(ele%5Bi%5D%2CtagName%2CclassName)))%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20this.setArray(arr)%3B%20%2F%2F%E5%80%9F%E9%89%B4jQuery%E6%96%B9%E6%B3%95%EF%BC%8C%E8%BF%99%E9%87%8C%E8%BF%94%E5%9B%9EzQuery%E5%AF%B9%E8%B1%A1%E5%8E%9F%E5%9E%8B%EF%BC%88%E4%B8%80%E4%B8%AADOM%E9%9B%86%E5%90%88%E5%AF%B9%E8%B1%A1%EF%BC%89%EF%BC%8C%E4%B8%8D%E5%86%8D%E6%98%AF%E8%BF%94%E5%9B%9E%E5%8D%95%E7%BA%AF%E7%9A%84DOM%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%20%0D%0A%7D%20%0D%0AzQuery.prototype.setArray%20%3D%20function(%20arr%20)%20%7B%20%0D%0A%20%20%20%20this.length%20%3D%200%3B%20%0D%0A%20%20%20%20Array.prototype.push.apply(%20this%2C%20arr%20)%3B%20%2F%2F%E8%BF%99%E9%87%8C%E7%9A%84%E6%A6%82%E5%BF%B5%E9%9D%9E%E5%B8%B8%E9%87%8D%E8%A6%81%EF%BC%8CzQuery%E6%96%B9%E6%B3%95%E5%AF%B9%E8%B1%A1%E6%89%A7%E8%A1%8C%E4%BA%86Array%E5%8E%9F%E5%9E%8B%E7%9A%84push()%E6%96%B9%E6%B3%95%20%0D%0A%20%20%20%20return%20this%3B%20%0D%0A%7D%20%0D%0AzQuery.fn%3DzQuery.prototype%3B%20%0D%0Avar%20%24%3DzQuery%3B%20%0D%0A%0D%0A%2F%2F%E5%8F%96select%E7%9A%84%E7%BB%9D%E5%AF%B9%E4%BD%8D%E7%BD%AE%E3%80%81%E9%AB%98%E3%80%81%E5%AE%BD%20%0D%0Afunction%20Offset(obj)%7B%20%0D%0A%20%20%20%20var%20t%20%3D%20obj.offsetTop%3B%20%0D%0A%20%20%20%20var%20l%20%3D%20obj.offsetLeft%3B%20%0D%0A%20%20%20%20var%20w%20%3D%20obj.offsetWidth%3B%20%0D%0A%20%20%20%20var%20h%20%3D%20obj.offsetHeight-2%3B%20%0D%0A%20%20%20%20%2F%2Fvar%20h%3Dobj.style.height%3B%20%0D%0A%20%20%20%20while(obj%3Dobj.offsetParent)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20t%2B%3Dobj.offsetTop%3B%20%0D%0A%20%20%20%20%20%20%20%20l%2B%3Dobj.offsetLeft%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20%7B%20%0D%0A%20%20%20%20%20%20%20%20top%20%3A%20t%2C%20%0D%0A%20%20%20%20%20%20%20%20left%20%3A%20l%2C%20%0D%0A%20%20%20%20%20%20%20%20width%20%3A%20w%2C%20%0D%0A%20%20%20%20%20%20%20%20height%20%3A%20h%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E6%A8%A1%E6%8B%9Fselect%20%0D%0Afunction%20instSelect(obj)%7B%20%0D%0A%20%20%20%20var%20offSet%3DOffset(obj)%3B%20%0D%0A%20%20%20%20obj.style.display%3D%22none%22%3B%20%0D%0A%20%20%20%20var%20sDiv%3Ddocument.createElement(%22div%22)%3B%20%0D%0A%20%20%20%20sDiv.id%3D%22div%22%2Bobj.name%3B%20%0D%0A%20%20%20%20sDiv.className%3D%22divSlt%22%3B%20%0D%0A%20%20%20%20sDiv.style.width%3DoffSet.width%2B%22px%22%3B%20%0D%0A%20%20%20%20%2F%2FsDiv.style.height%3DoffSet.height%2B%22px%22%3B%20%0D%0A%20%20%20%20sDiv.style.left%3DoffSet.left%2B%22px%22%3B%20%0D%0A%20%20%20%20sDiv.style.top%3DoffSet.top%2B%22px%22%3B%20%0D%0A%20%20%20%20document.body.appendChild(sDiv)%3B%20%0D%0A%20%20%20%20var%20sSpan%3Ddocument.createElement(%22span%22)%3B%20%0D%0A%20%20%20%20var%20spanId%3Dobj.options%5Bobj.selectedIndex%5D.value%3B%20%0D%0A%20%20%20%20var%20spanText%3Dobj.options%5Bobj.selectedIndex%5D.text%3B%20%0D%0A%20%20%20%20sSpan.id%3DspanId%3B%20%0D%0A%20%20%20%20sSpan.style.lineHeight%3DoffSet.height%2B%22px%22%3B%20%0D%0A%20%20%20%20sTxt%3Ddocument.createTextNode(spanText)%3B%20%0D%0A%20%20%20%20sSpan.appendChild(sTxt)%3B%20%0D%0A%20%20%20%20sDiv.appendChild(sSpan)%3B%20%0D%0A%20%20%20%20sSpan.onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20if(%24(%22div%22%2Bobj.name%2C%22ul%22).length%3D%3D0)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20sUl%3Ddocument.createElement(%22ul%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20sDiv.appendChild(sUl)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20optLen%3Dobj.options.length%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20tmp%3Ddocument.createDocumentFragment()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for(var%20j%3D0%3Bj%3CoptLen%3Bj%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20sltVal%3Dobj.options%5Bj%5D.value%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20sltTxt%3Dobj.options%5Bj%5D.text%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20sLi%3Ddocument.createElement(%22li%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sLi.id%3DsltVal%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sLi.appendChild(document.createTextNode(sltTxt))%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sLi.onmouseover%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.background%3D%22%23cccccc%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.color%3D%22white%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sLi.onmouseout%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.background%3D%22white%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.style.color%3D%22black%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sLi.onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sSpan.innerHTML%3Dthis.innerHTML%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20obj.value%3Dthis.id%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sUl.style.display%3D%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tmp.appendChild(sLi)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20sUl.appendChild(tmp)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(optLen%3E3)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sUl.style.overflowY%3D%22scroll%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sUl.style.height%3D%22100px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(%24(%22div%22%2Bobj.name%2C%22ul%22)%5B0%5D.style.display%3D%3D%22none%22)%20%24(%22div%22%2Bobj.name%2C%22ul%22)%5B0%5D.style.display%3D%22block%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%24(%22div%22%2Bobj.name%2C%22ul%22)%5B0%5D.style.display%3D%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E5%8F%96%E5%BE%97slect%E7%9A%84%E4%B8%AA%E6%95%B0%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%AF%B9%E6%AF%8F%E4%B8%AAselect%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%20%0D%0Afunction%20initSelect()%7B%20%0D%0A%20%20%20%20var%20slt%3D%24(document%2C%22select%22)%3B%20%0D%0A%20%20%20%20var%20sltLen%3Dslt.length%3B%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3CsltLen%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20instSelect(slt%5Bi%5D)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Awindow.onload%3DinitSelect%3B%20%0D%0Adocument.onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20var%20evt%3DgetEvent()%3B%20%0D%0A%20%20%20%20var%20element%3Devt.srcElement%20%7C%7C%20evt.target%3B%20%0D%0A%20%20%20%20var%20s%3D%24(document%2C%22select%22)%3B%20%0D%0A%20%20%20%20if((element.parentNode.parentNode%3D%3Dnull%7C%7Celement.parentNode.parentNode.className!%3D%22divSlt%22)%26%26element.nodeName!%3D%22SPAN%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20for%20(var%20i%3D0%3B%20i%3Cs.length%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!%24(%22div%22%20%2B%20s%5Bi%5D.name%2C%22ul%22)%5B0%5D)%20continue%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22div%22%20%2B%20s%5Bi%5D.name%2C%22ul%22)%5B0%5D.style.display%3D%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20getEvent()%7B%20%0D%0A%20%20%20%20%20%2F%2F%E5%90%8C%E6%97%B6%E5%85%BC%E5%AE%B9ie%E5%92%8Cff%E7%9A%84%E5%86%99%E6%B3%95%20%0D%0A%20%20%20%20%20if(document.all)%20%20%20%20return%20window.event%3B%20%0D%0A%20%20%20%20%20func%3DgetEvent.caller%3B%20%0D%0A%20%20%20%20%20while(func!%3Dnull)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20var%20arg0%3Dfunc.arguments%5B0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20if(arg0)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20if((arg0.constructor%3D%3DEvent%20%7C%7C%20arg0.constructor%20%3D%3DMouseEvent)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7C%7C%20(typeof(arg0)%3D%3D%22object%22%20%26%26%20arg0.preventDefault%20%26%26%20arg0.stopPropagation))%7B%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20arg0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20func%3Dfunc.caller%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20null%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<style type="text/css"> 
select{ 
height:20px; 
width:150px; 
} 
.divSlt{ 
position:absolute; 
font-size:12px; 
} 
.divSlt span{ 
display:block; 
width:100%; 
border:1px solid #999999; 
background:url(down.gif) no-repeat right center; 
text-indent:6px; 
cursor:pointer; 
} 
.divSlt ul{ 
display:block; 
background-color:#FFFFFF; 
width:100%; 
border:1px solid #999999; 
border-top:0px; 
margin:0px; 
padding:0px; 
list-style:none; 
} 
.divSlt ul li{ 
text-indent:5px; 
height:20px; 
line-height:20px; 
cursor:pointer; 
} 
</style> 
</head>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程