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

由于系统自带的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等等,希望大家提出宝贵意见.

</p> <p><title>editselect</title> </p> <p>function isie(){<br /> a=navigator.appversion.split(";")<br /> b=a[1].split(" ")<br /> return parsefloat(b[2])<br /> } </p> <p>if (isie()<5.5)<br /> {<br /> schtml='<!---->selectáð表'<br /> }<br /> else<br /> {<br /> schtml='selectáð表'<br /> } </p> <p>document.write(schtml)<br /> vdiv=selectcontent<br /> vdivhtml=selecthtml </p> <p>function editselect(name,size,defaulttext,width,height,readonly){<br /> var combo=this;<br /> this.options=new array();<br /> this.oj=new array();<br /> this.name=name;<br /> this.divname=name+'_div';<br /> this.buttonname=name+'_button';<br /> this.tablename=name+'_table';<br /> this.htmltable=name+'_html'<br /> if (!height) this.height=0; else this.height=height<br /> if (width) this.width=width<br /> if (!size) size=8<br /> if (!defaulttext) defaulttext=""<br /> if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1} </p> <p> eshtml=''<br /> +'</p> <table id='+this.tablename+' cellpadding="0" cellspacing="0" class="select"> <tr> <td bgcolor="#ffffff">'<br /> +'</p> <td><button class="selectbutton" id='+this.buttonname+'>6</td> </tr> </table> <p>'<br /> +''<br /> document.write(eshtml)<br /> this.sbutton=eval("document.all."+this.buttonname) </p> <p> if (this.readonly==1) eval("document.all."+this.name).onclick=function(){combo.show()} </p> <p> this.sbutton.onclick=function(){combo.show()}<br /> this.show=function(){<br /> pdiv=eval(combo.divname)<br /> ptable=eval(combo.tablename)<br /> var vhtml='</p> <table id="htmltable" cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width="100%">'<br /> for (i=0;i<combo.options.length;i++)<br /> {<br /> vhtml+='</p> <tr> <td nowrap>'+combo.options[i]<br /> }<br /> vhtml+="</table> <p>"<br /> vdivhtml.innerhtml=vhtml </p> <p> vtop=pdiv.offsettop+pdiv.offsetheight<br /> vleft=pdiv.offsetleft+2 </p> <p> vparent = pdiv.offsetparent;<br /> while (vparent.tagname.touppercase() != "body")<br /> {<br /> vleft += vparent.offsetleft;<br /> vtop += vparent.offsettop;<br /> vparent = vparent.offsetparent;<br /> } </p> <p> var redge=document.body.clientwidth-vleft<br /> var bedge=document.body.clientheight-vtop </p> <p> if (!combo.width) {vdiv.style.width=ptable.offsetwidth} else {vdiv.style.width=combo.width} </p> <p> if (combo.height==0)<br /> {<br /> vdiv.style.pixelheight=parseint(htmltable.offsetheight)+2<br /> vdivhtml.style.pixelheight=parseint(htmltable.offsetheight)+2<br /> }<br /> else<br /> {<br /> if (htmltable.offsetheight>combo.height)<br /> {<br /> vdiv.style.pixelheight=combo.height<br /> vdivhtml.style.pixelheight=combo.height </p> <p> }<br /> else<br /> { </p> <p> vdiv.style.pixelheight=parseint(htmltable.offsetheight)+2<br /> vdivhtml.style.pixelheight=parseint(htmltable.offsetheight)+2<br /> } </p> <p> } </p> <p> vdivhtml.scrolltop=0 </p> <p> if (redge<vdiv.offsetwidth)<br /> vdiv.style.left=vleft-1-(vdiv.offsetwidth-redge)<br /> else<br /> vdiv.style.left=vleft-1 </p> <p> if (bedge<vdiv.offsetheight)<br /> //vdiv.style.top=vtop-vdiv.offsetheight-pdiv.offsetheight<br /> vdiv.style.top=vtop-vdiv.offsetheight+bedge<br /> else<br /> vdiv.style.top=vtop </p> <p> vdivhtml.style.width=parseint(vdiv.style.width)<br /> vdiv.style.visibility="visible"<br /> } </p> <p> this.add=function(text,js){<br /> combo.options[combo.options.length]=text<br /> combo.oj[combo.oj.length]=js </p> <p> } </p> <p> this.clearall=function(){<br /> combo.options=new array()<br /> } </p> <p> this.about=function(){ </p> <p> }<br /> } </p> <p>function mo(obj){<br /> obj.style.backgroundcolor="#000099"<br /> obj.style.color="#ffffff"<br /> } </p> <p>function mu(obj){<br /> obj.style.backgroundcolor=""<br /> obj.style.color="#000000"<br /> } </p> <p>document.onmousedown=function(){<br /> if (vdiv.style.visibility=="visible"){<br /> mx=event.x + document.body.scrollleft<br /> my=event.y + document.body.scrolltop; </p> <p>x1=vdiv.offsetleft<br /> y1=vdiv.offsettop </p> <p>x2=vdiv.offsetleft+vdiv.offsetwidth<br /> y2=vdiv.offsettop+vdiv.offsetheight </p> <p>if (mx<x1 || my<y1 || x2<mx || y2<my)<br /> {<br /> vdiv.style.visibility='hidden'<br /> }<br /> }<br /> } </p> <p>.selecttext{<br /> border:0px<br /> height: 16;<br /> font-family:arial;<br /> font-size:12px;<br /> }<br /> .selectbutton{<br /> font-family:webdings;<br /> font-size:10px;<br /> height: 19;<br /> width: 16;<br /> border:1px solid #83a5eb;<br /> line-height:0px;<br /> padding-bottom:3px;<br /> background-color:#d1e0fd<br /> }<br /> .selecttable{<br /> font-family:arial;<br /> font-size:12px;<br /> cursor:default;<br /> }<br /> .selectcontent<br /> {<br /> position: absolute;<br /> top:0;<br /> left:0;<br /> overflow:auto;<br /> border:1px solid #000000<br /> } </p> <p>.selectdiv<br /> {<br /> position: absolute;<br /> width:100;<br /> overflow:hidden;<br /> }<br /> .select{<br /> border-collapse: collapse;<br /> border:1px solid #7f9db9<br /> } </p> <table border="0" width="100%"> <tr> <td width="151" align="center"><font size="2">可编辑的select</font></td> <td> var sel1=new editselect("select1","25","可编辑的select","");<br /> sel1.add("这是一个可以编辑的select")<br /> sel1.add("支持css")<br /> sel1.add("可以通过css，修改外形")<br /> sel1.add("突破原来的select诸多限制") </td> </tr> <tr> <td width="151" align="center"><font size="2">长度可以随意修改<br /> 可以设置为只读</font></td> <td> <p>var sel2=new editselect("select2","20","长度可以随意修改",250,82,1);<br /> sel2.add("这是一个可以编辑的select")<br /> sel2.add("支持css")<br /> sel2.add("可以通过css，修改外形") </p> <p>sel2.add("作者:舜子制作")<br /> sel2.add("msn:puterjam@msn.com") </p> </td> </tr> <tr> <td width="151" align="center"><font size="2">可以遮盖系统select</font></td> <td> <p>var sel3=new editselect("select3","25","可以遮盖系统select","",41);<br /> sel3.add("这是一个可以编辑的select")<br /> sel3.add("支持css")<br /> sel3.add("可以通过css，修改外形")<br /> sel3.add("突破原来的select诸多限制") </p> </td> </tr> <tr> <td width="151" align="right">　</td> <td>系统的select　</td> </tr> </table> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]