可编辑下拉框

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

zhouya10099

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

阅读量467

点赞数 1

本文链接：https://blog.csdn.net/zhouya10099/article/details/10949217

版权

<html>   
  <head>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  <script language=javascript src="My97DatePicker/WdatePicker.js"></script>	
  <title>可编辑下拉框</title>   
 
  </head>   
  <body>  
  <!--  多个下拉选择框 用 span 包一层 不然 位置重合  -->
  <span style="width:200px;">
  <select   name="test" style="width:200px;">   
     <option   value="长沙">长沙</option>   
     <option   value="北京">北京</option>   
  </select> 
  </span>
   
  <span style="width:200px;">
  <select   name="test1" style="width:200px;">   
     <option   value="北京">北京</option> 
     <option   value="长沙">长沙</option> 
  </select> 
 </span> 


  
  <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+"'    οnchange='"+this.obj+".find()'   ";
	        inputbox += "  class=\"Wdate\"  οnclick=\"WdatePicker({dateFmt:'yyyy-MM-dd'})\" ";//增加日期控件
			inputbox += "style='position:absolute;width:"+(this.select.offsetWidth-16)+";height:";
			inputbox +=  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.οnchange=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","test")   
  a.init();   
  
  var   b=new  combox("b","test1")   
  b.init();   
  
  //初始化值
  document.getElementsByName('combox_test1')[0].value='长沙';
  document.getElementsByName('combox_test1')[0].value='北京';
  /*作用方法：   
  var   obj=new   combox(var1,var2)   
  var1:新生成的combox变量(如:a)   
  var2:原下拉框的name   
  obj.init():对象初始化   
  注意:后台取值时用combox_var2进行取值   
  */   
  </script>
  </body>    
  </html>