.
.
.
.
1 <script> 2 scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectáD±í</div></div>' 3 document.write(scHTML) 4 vDiv=selectcontent 5 vDivHtml=selecthtml 6 7 function editselect(name,size,defaulttext,width,height,readonly){ 8 var combo=this; 9 this.options=new Array(); 10 this.name=name; 11 this.divname=name+'_div'; 12 this.buttonname=name+'_button'; 13 this.tablename=name+'_table'; 14 this.htmltable=name+'_html' 15 16 if (!height) this.height=0; else this.height=height 17 if (width) this.width=width 18 if (!size) size=8 19 if (!defaulttext) defaulttext="" 20 if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1} 21 22 esHTML='<div id='+this.divname+'>' 23 +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>' 24 +'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>' 25 +'</div>' 26 document.write(esHTML) 27 this.sbutton=eval("document.all."+this.buttonname) 28 29 if (this.readonly==1) eval(this.name).onclick=function(){combo.show()} 30 31 this.sbutton.onclick=function(){combo.show()} 32 this.show=function(){ 33 pDiv=eval(combo.divname) 34 pTable=eval(combo.tablename) 35 var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>' 36 for (i=0;i<combo.options.length;i++) 37 { 38 vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\'"><td nowrap>'+combo.options[i] 39 } 40 vHTML+="</table>" 41 vDivHtml.innerHTML=vHTML 42 43 vtop=pDiv.offsetTop+pDiv.offsetHeight 44 vleft=pDiv.offsetLeft+1 45 46 47 vParent = pDiv.offsetParent; 48 while (vParent.tagName.toUpperCase() != "BODY") 49 { 50 vleft += vParent.offsetLeft; 51 vtop += vParent.offsetTop; 52 vParent = vParent.offsetParent; 53 } 54 55 var redge=document.body.clientWidth-vleft 56 var bedge=document.body.clientHeight-vtop 57 58 59 60 if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width} 61 62 63 if (combo.height==0) 64 { 65 vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 66 vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 67 } 68 else 69 { 70 if (htmltable.offsetHeight>combo.height) 71 { 72 vDiv.style.pixelHeight=combo.height 73 vDivHtml.style.pixelHeight=combo.height 74 75 76 } 77 else 78 { 79 80 vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 81 vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 82 } 83 84 } 85 86 vDivHtml.scrollTop=0 87 88 if (redge<vDiv.offsetWidth) 89 vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge) 90 else 91 vDiv.style.left=vleft-1 92 93 94 if (bedge<vDiv.offsetHeight) 95 //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight 96 vDiv.style.top=vtop-vDiv.offsetHeight+bedge 97 else 98 vDiv.style.top=vtop 99 100 101 vDivHtml.style.width=parseInt(vDiv.style.width) 102 vDiv.style.visibility="visible" 103 } 104 105 this.add=function(text){ 106 combo.options[combo.options.length]=text 107 } 108 109 this.about=function(){ 110 111 } 112 } 113 114 115 function mo(obj){ 116 obj.style.backgroundColor="#000099" 117 obj.style.color="#ffffff" 118 } 119 120 function mu(obj){ 121 obj.style.backgroundColor="" 122 obj.style.color="#000000" 123 } 124 125 document.onmousedown=function(){ 126 if (vDiv.style.visibility=="visible"){ 127 mx=event.x + document.body.scrollLeft 128 my=event.y + document.body.scrollTop; 129 130 x1=vDiv.offsetLeft 131 y1=vDiv.offsetTop 132 133 x2=vDiv.offsetLeft+vDiv.offsetWidth 134 y2=vDiv.offsetTop+vDiv.offsetHeight 135 136 if (mx<x1 || my<y1 || x2<mx || y2<my) 137 { 138 vDiv.style.visibility='hidden' 139 } 140 } 141 } 142 </script> 143 144 145 <style> 146 .selecttext{ 147 border:0px 148 height: 16; 149 font-family:arial; 150 font-size:12px; 151 } 152 .selectbutton{ 153 font-family:webdings; 154 font-size:10px; 155 height: 19; 156 16; 157 border:1px solid #83A5EB; 158 line-height:0px; 159 padding-bottom:3px; 160 background-color:#D1E0FD 161 } 162 .selecttable{ 163 font-family:arial; 164 font-size:12px; 165 cursor:default; 166 } 167 .selectcontent 168 { 169 position: absolute; 170 top:0; 171 left:0; 172 overflow:auto; 173 border:1px solid #000000 174 } 175 176 .selectdiv 177 { 178 position: absolute; 179 100; 180 overflow:hidden; 181 } 182 .select{ 183 border-collapse: collapse; 184 border:1px solid #7F9DB9 185 } 186 </style> 187 <table border="0" width="100%"> 188 <tr> 189 <td width="151" align="center"><font size="2">可编辑的Select</font></td> 190 <td><script> 191 var sel1=new editselect("select1","25","可编辑的Select",""); 192 sel1.add("这是一个可以编辑的Select") 193 sel1.add("支持CSS") 194 sel1.add("可以通过CSS,修改外形") 195 sel1.add("突破原来的Select诸多限制") 196 </script></td> 197 </tr> 198 <tr> 199 <td width="151" align="center"><font size="2">长度可以随意修改 200 可以设置为只读</font></td> 201 <td> 202 <script> 203 var sel2=new editselect("select2","20","长度可以随意修改",250,82,1); 204 sel2.add("这是一个可以编辑的Select") 205 sel2.add("支持CSS") 206 sel2.add("可以通过CSS,修改外形") 207 208 </script> 209 </td> 210 </tr> 211 <tr> 212 <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td> 213 <td> 214 <script> 215 var sel3=new editselect("select3","25","可以遮盖系统Select","",41); 216 sel3.add("这是一个可以编辑的Select") 217 sel3.add("支持CSS") 218 sel3.add("可以通过CSS,修改外形") 219 sel3.add("突破原来的Select诸多限制") 220 </script> 221 </td> 222 </tr> 223 <tr> 224 <td width="151" align="right"> </td> 225 <td><select><option>系统的Select</option></select> </td> 226 </tr> 227 </table>