打造个性化的Select(可编辑)

2019-11-21 02:31:23

字体：大中小

来源：转载

供稿：网友

由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select.

功能:
  1.可编辑的Select
  2.长度可以随意修改
  3.可以遮盖系统Select
  4.支持forms
  5.支持CSS修改外观
  6.修正在IE 5.0上运行出错的问题
  7.支持使用js脚本
使用方法
[b]var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)[/b]
[b]实体化变量.add(option数值,JS脚本)[/b]

这只是一个测试版,很多功能没有完善,比如没有区分value和caption等等,希望大家提出宝贵意见.

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>EditSelect</title> <script> function isIE(){ a=navigator.appVersion.split(";") b=a[1].split(" ") return parseFloat(b[2]) } if (isIE()<5.5)  {      scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><div id="selecthtml" class="selectcontent">selectÁÐ表</div></div>' } else {      scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectÁÐ表</div></div>' } document.write(scHTML) vDiv=selectcontent vDivHtml=selecthtml function editselect(name,size,defaulttext,width,height,readonly){   var combo=this;   this.options=new Array();   this.oj=new Array();   this.name=name;   this.divname=name+'_div';   this.buttonname=name+'_button';   this.tablename=name+'_table';   this.htmltable=name+'_html'   if (!height) this.height=0; else this.height=height   if (width) this.width=width   if (!size) size=8   if (!defaulttext) defaulttext=""   if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}      esHTML='<div id='+this.divname+'>'          +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'          +'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'          +'</div>'   document.write(esHTML)   this.sbutton=eval("document.all."+this.buttonname)      if (this.readonly==1) eval("document.all."+this.name).onclick=function(){combo.show()}        this.sbutton.onclick=function(){combo.show()}   this.show=function(){     pDiv=eval(combo.divname)     pTable=eval(combo.tablename)     var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'     for (i=0;i<combo.options.length;i++)       {        vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=/'hidden/';'+combo.oj[i]+'"><td nowrap>'+combo.options[i]       }      vHTML+="</table>"     vDivHtml.innerHTML=vHTML          vtop=pDiv.offsetTop+pDiv.offsetHeight     vleft=pDiv.offsetLeft+2               vParent = pDiv.offsetParent;      while (vParent.tagName.toUpperCase() != "BODY")  {   vleft += vParent.offsetLeft;   vtop += vParent.offsetTop;   vParent = vParent.offsetParent;  }    var redge=document.body.clientWidth-vleft    var bedge=document.body.clientHeight-vtop        if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}          if (combo.height==0)       {         vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2         vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2       }       else       {          if (htmltable.offsetHeight>combo.height)           {             vDiv.style.pixelHeight=combo.height             vDivHtml.style.pixelHeight=combo.height             }             else             {                          vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2               vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2            }            }          vDivHtml.scrollTop=0          if (redge<vDiv.offsetWidth)       vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)         else       vDiv.style.left=vleft-1           if (bedge<vDiv.offsetHeight)     //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight     vDiv.style.top=vtop-vDiv.offsetHeight+bedge          else       vDiv.style.top=vtop                 vDivHtml.style.width=parseInt(vDiv.style.width)       vDiv.style.visibility="visible"   }      this.add=function(text,js){      combo.options[combo.options.length]=text      combo.oj[combo.oj.length]=js   }      this.clearall=function(){   combo.options=new Array()   }   this.about=function(){     } } function mo(obj){ obj.style.backgroundColor="#000099" obj.style.color="#ffffff" } function mu(obj){ obj.style.backgroundColor="" obj.style.color="#000000" } document.onmousedown=function(){ if (vDiv.style.visibility=="visible"){ mx=event.x + document.body.scrollLeft my=event.y + document.body.scrollTop; x1=vDiv.offsetLeft y1=vDiv.offsetTop x2=vDiv.offsetLeft+vDiv.offsetWidth y2=vDiv.offsetTop+vDiv.offsetHeight if (mx<x1 || my<y1 || x2<mx || y2<my)     {       vDiv.style.visibility='hidden'    } } }</script> <style> .selecttext{ border:0px height: 16; font-family:arial; font-size:12px; } .selectbutton{ font-family:webdings; font-size:10px; height: 19; width: 16;  border:1px solid #83A5EB; line-height:0px; padding-bottom:3px; background-color:#D1E0FD } .selecttable{ font-family:arial; font-size:12px; cursor:default; } .selectcontent { position: absolute; top:0; left:0; overflow:auto; border:1px solid #000000 } .selectdiv { position: absolute;  width:100; overflow:hidden; } .select{ border-collapse: collapse; border:1px solid #7F9DB9 } </style> </head> <body bgcolor="#83A5EB"> <table border="0" width="100%">     <tr>         <td width="151" align="center"><font size="2">可编辑的Select</font></td>         <td><script> var sel1=new editselect("select1","25","可编辑的Select",""); sel1.add("这是一个可以编辑的Select") sel1.add("支持CSS") sel1.add("可以通过CSS，修改外形") sel1.add("突破原来的Select诸多限制") </script></td>     </tr>     <tr>         <td width="151" align="center"><font size="2">长度可以随意修改可以设置为只读</font></td>         <td>         <script> var sel2=new editselect("select2","20","长度可以随意修改",250,82,1); sel2.add("这是一个可以编辑的Select") sel2.add("支持CSS") sel2.add("可以通过CSS，修改外形") sel2.add("作者:舜子制作") sel2.add("MSN:puterjam@msn.com") </script>         </td>     </tr>     <tr>         <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>         <td>         <script> var sel3=new editselect("select3","25","可以遮盖系统Select","",41); sel3.add("这是一个可以编辑的Select") sel3.add("支持CSS") sel3.add("可以通过CSS，修改外形") sel3.add("突破原来的Select诸多限制") </script>         </td>     </tr>     <tr>         <td width="151" align="right">　</td>         <td><select><option>系统的Select</option></select>　</td>     </tr> </table> </body> </html>

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

上一篇：真正的连续滚动图片

下一篇：关联的Select，可以支持客户端动态更新