html select edit

最新推荐文章于 2021-06-03 10:47:23 发布

fdsafds

最新推荐文章于 2021-06-03 10:47:23 发布

阅读量172

点赞数

文章标签： HTML prototype

本文链接：https://blog.csdn.net/fdsafds/article/details/83337584

版权

  <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>   
  <style>   
     a{color:blue;text-decoration:none}   
     a:hover{color:red}   
  </style>   
  </head>   

  <body>   

  <table   style="border:2px   outset;background-color:#d2e8FF"   width="250"   height="100"   align="center">   
      <tr>   
          <td   width="100%"   align="center"   colspan="2"><b>可编辑下拉框</b></td>   
      </tr>   
      <tr>   
      <td   width="60%"   height="30"   align="center">   
  <select   name="fason">   
  <option   value="a">a</option>   
  <option   value="b">b</option>   
  </select>   
          </td>   
          <td   width="40%"   height="30"   align="left">   
          <input   type=button   value="   取值   "   onclick="alert(document.getElementsByName('combox_fason')[0].value)">   
  </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()   
  /*作用方法：   
  var   obj=new   combox(var1,var2)   
  var1:新生成的combox变量(如:a)   
  var2:原下拉框的name   
  obj.init():对象初始化   
  注意:后台取值时用combox_var2进行取值   
  */   
  </script>   
  </body>   

  </html>