用javascript和css模拟select的脚本

更新时间：2008年06月01日 20:15:16 作者：

传统的select控件比较难看，用css美化也达不到好的效果，而javascript和css结合起来，用div等元素模拟一个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">&nbsp;</td>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30">&nbsp;</td>   </tr>   <tr>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30">&nbsp;</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">&nbsp;</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">&nbsp;</td>   </tr>   <tr>     <td width="200" height="30">&nbsp;</td>     <td width="200" height="30"><input type="submit" name="Submit" value="提交" /></td>     <td width="200" height="30">&nbsp;</td>   </tr> </table> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

checkbox实现全选的多种方法不断更新
checkbox实现全选的多种方法不断更新...
2006-07-07
JS实多级联动下拉菜单类，简单实现省市区联动菜单！
JS实多级联动下拉菜单类，简单实现省市区联动菜单！...
2007-05-05
28个JS验证函数收集
做网站的时候，很多地方都是由表单提交组成的，但是有提交的地方都要有验证。客户端验证最简单的方法就是使用JS自定义函数。这个文档包含平时常用的28个验证函数，还有验证函数几种使用方法。
2010-03-03
判断file框选择的是否为图片
判断file框选择的是否为图片...
2006-08-08
实用的JS表单验证提示效果
一个流行且实用的JS表单验证提示，演示了怎么自定义错误信息的显示方式，同时通过写FormValid.showError类方法来实现错误显示方式自定义.
2009-11-11
一个非常强大完整的web表单验证程序Validator v1.05
一个非常强大完整的web表单验证程序Validator v1.05...
2006-07-07
一个漂亮的下拉列表，去掉了灰色倒三角按钮
一个漂亮的下拉列表，去掉了灰色倒三角按钮...
2007-06-06
javascript各浏览器中option元素的表现差异
javascript各浏览器中option元素的表现差异,需要的朋友可以参考下。
2011-04-04
javascript下给元素添加事件的方法与代码
javascript下给元素添加事件的方法与代码...
2007-08-08
(仅IE下有效)关于checkbox 三态
(仅IE下有效)关于checkbox 三态...
2007-05-05