可编辑下拉框实现方式2种

来源：互联网发布：手机网络信号不稳定编辑：程序博客网时间：2024/06/05 00:45

可编辑下拉框-HTML

<div style="position:relative;">  <select style="width:120px;" onchange="document.getElementById('input').value=this.value">    <option value="A类">A类</option>    <option value="B类">B类</option>    <option value="C类">C类</option>    <option value="D类">D类</option>  </select>  <input id="input" name="input" style="position:absolute;width:99px;height:16px;left:1px;top:2px;border-bottom:0px;border-right:0px;border-left:0px;border-top:0px;"></div>

可编辑下拉框-JS

<html>     <head>     <meta   name="GENERATOR"   content="Microsoft   FrontPage   5.0">     <meta   name="ProgId"   content="FrontPage.Editor.Document">     <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">     <title>可编辑下拉框</title>     </head>       <body>     <table   style="border:2px   outset;background-color:#d2e8FF"   width="250"   height="100"   align="center">             <tr>               <td   width="60%"   height="30"   align="center">                 <select   name="fason">                     <option   value="可编辑下拉框">可编辑下拉框</option>                     <option   value="作者">作者</option>                 </select>               </td>             </tr>     </table>         <script   language="javascript">         function   combox(obj,select){             this.obj=obj             this.name=select;             this.select=document.getElementsByName(select)[0];             /*要转换的下拉框*/         }         /*初始化对象*/         combox.prototype.init=function(){             var   inputbox="<input   name='combox_"+this.name+"'   onchange='"+this.obj+".find()'   "             inputbox+="style='position:absolute;width:"+(this.select.offsetWidth-16)+";height:"+this.select.offsetHeight+";left:"+getL(this.select)+";top:"+getT(this.select)+"'>"             document.write(inputbox)             with(this.select.style){             left=getL(this.select)             top=getT(this.select)             position="absolute"             clip="rect(0   "+(this.select.offsetWidth)+"   "+this.select.offsetHeight+"   "+(this.select.offsetWidth-18)+")"             /*切割下拉框*/             }             this.select.onchange=new   Function(this.obj+".change()")             this.change()                       }     /*初始化结束*/               ////////对象事件定义///////         combox.prototype.find=function(){         /*当搜索到输入框的值时,下拉框自动定位*/             var   inputbox=document.getElementsByName("combox_"+this.name)[0]             with(this.select){             for(i=0;i<options.length;i++)                 if(options[i].text.indexOf(inputbox.value)==0){                     selectedIndex=i                     this.change();                     break;                 }             }         }               combox.prototype.change=function(){             /*定义下拉框的onchange事件*/             var   inputbox=document.getElementsByName("combox_"+this.name)[0]             inputbox.value=this.select.options[this.select.selectedIndex].text;             with(inputbox){select();focus()};         }         ////////对象事件结束///////         /*公用定位函数(获取控件绝对坐标)*/         function   getL(e){             var   l=e.offsetLeft;             while(e=e.offsetParent)l+=e.offsetLeft;             return   l         }         function   getT(e){             var   t=e.offsetTop;             while(e=e.offsetParent)t+=e.offsetTop;             return   t         }     /*结束*/     </script>     <script   language="javascript">         var   a=new combox("a","fason")         a.init()     </script>           </body>           </html>

0 0