可编辑下拉框

最新推荐文章于 2018-06-19 15:42:34 发布

alongines

最新推荐文章于 2018-06-19 15:42:34 发布

阅读量3.6k

点赞数 1

分类专栏： HTML / CSS / JavaScript 文章标签： function javascript microsoft generator border input

本文链接：https://blog.csdn.net/zhanggnol/article/details/6981232

版权

HTML / CSS / JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<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+"'   οnchange='"+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.ο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","fason")   
	a.init()   
</script>   
    
</body>   
    
</html>