不同格式的下拉列表框

你的名字 2022-04-01 19:29 355阅读 0赞

![2011060615534427.jpg][]

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).οnclick=function(){combo.show()}  
     30   
     31   this.sbutton.οnclick=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 οnmοuseοver="mo(this)" οnmοuseοut="mu(this)" οnclick="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.οnmοusedοwn=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 width: 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 width: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>

[2011060615534427.jpg]: /images/20220401/9764915e15034ab685b92a253260916a.png