用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> 
<script type="text/javascript"> 
var zQuery=function(ele,tagName,className){ //核心对象 
    if ( window == this ) return new zQuery(ele,tagName,className); 
    if(!arr){var arr=new Array;} 
    if(ele){ 
        if(ele.constructor!=zQuery){ 
            var elem=typeof(ele)=="object"?ele:document.getElementById(ele); 
            if(!tagName){ 
                arr.push(elem); 
            }else{ 
                var tags=elem.all&&!window.opera?tagName=="*"?elem.all:elem.all.tags(tagName):elem.getElementsByTagName(tagName); 
                if(!className){ 
                    for(var i=0, l=tags.length; i<l; i++){ 
                        arr.push(tags[i]); 
                    } 
                }else{ 
                    var reClassName=RegExp("(^|\\s+)"+className+"($|\\s+)"); 
                    for(var i=0, l=tags.length; i<l; i++){ 
                        if(reClassName.test(tags[i].className)){ 
                            arr.push(tags[i]); 
                        } 
                    } 
                } 
            } 
        }else{ 
            for(var i=0, l=ele.length; i<l; i++){ 
                arr=arr.concat(Array.prototype.slice.call(zQuery(ele[i],tagName,className))); 
            } 
        } 
    } 
    return this.setArray(arr); //借鉴jQuery方法，这里返回zQuery对象原型（一个DOM集合对象），不再是返回单纯的DOM数组对象 
} 
zQuery.prototype.setArray = function( arr ) { 
    this.length = 0; 
    Array.prototype.push.apply( this, arr ); //这里的概念非常重要，zQuery方法对象执行了Array原型的push()方法 
    return this; 
} 
zQuery.fn=zQuery.prototype; 
var $=zQuery; 

//取select的绝对位置、高、宽 
function Offset(obj){ 
    var t = obj.offsetTop; 
    var l = obj.offsetLeft; 
    var w = obj.offsetWidth; 
    var h = obj.offsetHeight-2; 
    //var h=obj.style.height; 
    while(obj=obj.offsetParent) 
    { 
        t+=obj.offsetTop; 
        l+=obj.offsetLeft; 
    } 
    return { 
        top : t, 
        left : l, 
        width : w, 
        height : h 
    } 
} 
//模拟select 
function instSelect(obj){ 
    var offSet=Offset(obj); 
    obj.style.display="none"; 
    var sDiv=document.createElement("div"); 
    sDiv.id="div"+obj.name; 
    sDiv.className="divSlt"; 
    sDiv.style.width=offSet.width+"px"; 
    //sDiv.style.height=offSet.height+"px"; 
    sDiv.style.left=offSet.left+"px"; 
    sDiv.style.top=offSet.top+"px"; 
    document.body.appendChild(sDiv); 
    var sSpan=document.createElement("span"); 
    var spanId=obj.options[obj.selectedIndex].value; 
    var spanText=obj.options[obj.selectedIndex].text; 
    sSpan.id=spanId; 
    sSpan.style.lineHeight=offSet.height+"px"; 
    sTxt=document.createTextNode(spanText); 
    sSpan.appendChild(sTxt); 
    sDiv.appendChild(sSpan); 
    sSpan.onclick=function(){ 
        if($("div"+obj.name,"ul").length==0){ 
            var sUl=document.createElement("ul"); 
            sDiv.appendChild(sUl); 
            var optLen=obj.options.length; 
            var tmp=document.createDocumentFragment(); 
            for(var j=0;j<optLen;j++){ 
                var sltVal=obj.options[j].value; 
                var sltTxt=obj.options[j].text; 
                var sLi=document.createElement("li"); 
                sLi.id=sltVal; 
                sLi.appendChild(document.createTextNode(sltTxt)); 
                sLi.onmouseover=function(){ 
                    this.style.background="#cccccc"; 
                    this.style.color="white"; 
                } 
                sLi.onmouseout=function(){ 
                    this.style.background="white"; 
                    this.style.color="black"; 
                } 
                sLi.onclick=function(){ 
                    sSpan.innerHTML=this.innerHTML; 
                    obj.value=this.id; 
                    sUl.style.display="none"; 
                } 
                tmp.appendChild(sLi); 
            } 
            sUl.appendChild(tmp); 
            if(optLen>3){ 
                sUl.style.overflowY="scroll"; 
                sUl.style.height="100px"; 
            } 
        } 
        else{ 
            if($("div"+obj.name,"ul")[0].style.display=="none") $("div"+obj.name,"ul")[0].style.display="block"; 
            else $("div"+obj.name,"ul")[0].style.display="none"; 
        } 
    } 
} 
//取得slect的个数，并且对每个select执行函数 
function initSelect(){ 
    var slt=$(document,"select"); 
    var sltLen=slt.length; 
    for(var i=0;i<sltLen;i++){ 
        instSelect(slt[i]); 
    } 
} 

window.onload=initSelect; 
document.onclick=function(){ 
    var evt=getEvent(); 
    var element=evt.srcElement || evt.target; 
    var s=$(document,"select"); 
    if((element.parentNode.parentNode==null||element.parentNode.parentNode.className!="divSlt")&&element.nodeName!="SPAN"){ 
        for (var i=0; i<s.length; i++) { 
            if(!$("div" + s[i].name,"ul")[0]) continue; 
            $("div" + s[i].name,"ul")[0].style.display="none"; 
        } 
    } 
} 
function getEvent(){ 
     //同时兼容ie和ff的写法 
     if(document.all)    return window.event; 
     func=getEvent.caller; 
     while(func!=null){ 
         var arg0=func.arguments[0]; 
         if(arg0){ 
             if((arg0.constructor==Event || arg0.constructor ==MouseEvent) 
                || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){     
                return arg0; 
              } 
         } 
          func=func.caller; 
        } 
        return null; 
} 
</script> 
<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> 

<body> 
<form id="form1" name="form1" method="post" action="rq.asp"><table width="600" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td width="200" height="30"> </td> 
    <td width="200" height="30"> </td> 
    <td width="200" height="30"> </td> 
  </tr> 
  <tr> 
    <td width="200" height="30"> </td> 
    <td width="200" height="30"> </td> 
    <td width="200" height="30"><select name="slt1" id="slt1"> 
      <option value="选项一" selected="selected">选项一</option> 
      <option value="选项二">选项二</option> 
      <option value="选项三">选项三</option> 
      <option value="选项四">选项四</option> 
      <option value="选项五">选项五</option> 
      <option value="选项六">选项六</option> 
      <option value="选项七">选项七</option> 
        </select></td> 
  </tr> 
  <tr> 
    <td width="200" height="30"> </td> 
    <td width="200" height="30"><select name="slt2" id="slt2"> 
      <option value="选项一" selected="selected">选项一</option> 
      <option value="选项二">选项二</option> 
      <option value="选项三">选项三</option> 
        </select></td> 
    <td width="200" height="30"> </td> 
  </tr> 
  <tr> 
    <td width="200" height="30"> </td> 
    <td width="200" height="30"><input type="submit" name="Submit" value="提交" /></td> 
    <td width="200" height="30"> </td> 
  </tr> 
</table> 
</form> 
</body> 
</html> 


  [Ctrl+A 全选 注:如需引入外部Js需刷新
上一个：javascript prototype的深度探索不是原型继承那么简单第1/3页
下一个：JS入门代码集合第1/4页
更多图片编程知识: