用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需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript判断单选框或复选框是否选中方法集锦
javascript判断单选框或复选框是否选中方法集锦...
2007-04-04
javascript操作文本框readOnly
javascript操作文本框readOnly...
2007-05-05
一直复略了的一个问题，关于表单重复提交
一直复略了的一个问题，关于表单重复提交...
2007-02-02
JavaScript 输入框内容格式验证代码
当鼠标焦点移至密码输入框时，利用js脚本自动验证用户名的格式正确与否
2010-02-02
javascript 设置某DIV区域内的checkbox复选框
主要用到dom的两个函数document.getElementById(id)和document.getElementsByTagName(name),希望对写复选框全选的虾们有些许帮助。
2009-11-11
二级连动的另一个不错的实现方法
二级连动的另一个不错的实现方法...
2007-01-01
js禁用和激活input表单的方法
这个功能方便控制input表达的禁用和激活
2008-06-06
javascript实现通过拼音首字母快速选择下拉列表
比如，某选项的拼音首字母为"a",只要按下键盘上的"a"，就可以快速选择该项。如何解决重音字和兼容ff. ff下怎呢得到asc呢，忘高手指教
2008-05-05
JS 无限级 Select效果实现代码(json格式)
JS 无限级 Select效果实现代码(json格式)，学习js的朋友可以参考下。
2011-08-08
js在不刷新的情况下动态添加表格行[脚本之家强烈推荐]
这个功能一般用于，一些添加一些不确定的信息，由用户自己添加，以前都是如果你添加了2个突然发现不够，再点添加，就会发现原来的内容被替换了，下面的代码就不会，比较不错
2008-10-10

用javascript和css模拟select的脚本

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具