可编者下拉框 _Web前端

可编辑下拉框

第一种方法：js动态生成

<html> 
<head> 
	<title> 可编辑下拉框 </title> 
	<META NAME="Generator" CONTENT="EditPlus"> 
	<META NAME="Author" CONTENT=""> 
	<META NAME="Keywords" CONTENT=""> 
	<META NAME="Description" CONTENT=""> 
</head> 
<body> 
<table border="1" style="border-collapse:collapse "> 
	<tr> 
		<td width="300">
			<select name=test1> 		
				<option value="可编辑下拉框1" selected>可编辑下拉框1</option> 				
				<option value="1">1</option> 		
				<option value="2">2</option> 
				<option value="3">3</option> 				
			</select> 
			<input type="button" value="获取编辑框1的值" onclick="alert(document.getElementById('username').value)"> 	
		</td> 	
		<td width="109">
			<select name=test2> 	
				<option value="可编辑下拉框2">可编辑下拉框25555555</option> 
				<option value="1">4</option> 	
				<option value="2" selected>5</option> 
				<option value="3">6</option> 
			</select> 	
		</td> 
		<td width="343"> 
			<input type="button" value="获取编辑框2的值" onclick="alert(document.getElementById('password').value)"> 
		</td> 
		
	</tr> 

</table> 

<script language="javascript"> 

	var a=new combox("username","test1"); 
	
	//参数1为新生成输入框的名称 
	
	//参数2为原来的select对象名称 
	
	a.init(a); 
	
	var b=new combox("password","test2"); 
	
	b.init(b); 
	
	function combox(_inpuObjName,_controlSelectName) { 
	
		this.inpuObjName=_inpuObjName;//生成的输入框对象名称 
		
		this.inputbox=null;//生成的输入框对象 
		
		this.controlSelect=document.getElementById(_controlSelectName);//原来的下拉框对象 
		
	
		//初始化对象 
		
		//_comboxObj:combox对象，须指向自己 
		
		this.init=function(_comboxObj) { 
	
		this.inputbox=document.createElement("input"); 
		
		this.inputbox.id=this.inpuObjName; 
		
		this.inputbox.comboxObj=_comboxObj; 
		
		this.inputbox.onchange=function() { 
			this.comboxObj.find(); 
		} 
		
		with(this.inputbox.style) { 
			width=this.controlSelect.offsetWidth-16; 
			height=this.controlSelect.offsetHeight; 
		} 
		
		this.controlSelect.insertAdjacentElement("beforeBegin",this.inputbox); 
		
		_span=document.createElement("span"); 
		
		_span.style.width=18; 
		
		this.controlSelect.insertAdjacentElement("beforeBegin",_span); 
		
		_span.appendChild(this.controlSelect); 
		
		_container=document.createElement("span"); 
		
		this.inputbox.insertAdjacentElement("beforeBegin",_container); 
		
		_container.appendChild(this.inputbox); 
		
		_container.appendChild(_span); 
		
		_container.style.width=this.inputbox.offsetWidth+18; 
		
		_width=this.controlSelect.offsetWidth-18; 
		
		with (this.controlSelect.style) {
			margin="0 0 0 -"+_width; 
		} 
	
		this.controlSelect.comboxObj=_comboxObj; 
	
		this.controlSelect.onchange=function() { 
			this.comboxObj.change(); 
		} 
		this.change(); 
	} 
	
		//当搜索到输入框的值时,下拉框自动定位/ 
		
		this.find=function() { 
			with (this.controlSelect) { 
				for(i=0;i<options.length;i++) 
					if(options[i].text.indexOf(this.inputbox.value)==0) { 
						selectedIndex=i; 
						this.change(); 
						break; 
					} 
			} 
		} 
	
		//定义下拉框的onchange事件 
		
		this.change=function() { 
			this.inputbox.value=this.controlSelect.options[this.controlSelect.selectedIndex].text; 
			with (this.inputbox) { 
				select(); 
				focus();	
			} 
		} 
	
	} 
	
	/** 
	
	* 定位函数，获取控件绝对坐标 
	
	*/ 
	function getLeftPos(e) { 
		var left=e.offsetLeft; 
		while (e=e.offsetParent) { 
			left+=e.offsetLeft; 
		} 
		return left; 
	} 
	
	function getTopPos(e) { 
		var top=e.offsetTop; 
		while (e=e.offsetParent) { 
			top+=e.offsetTop; 
		} 
		return top; 	
	}　　 

</script> 

</BODY> 

</HTML>

第二种方法：样式设置

<html> 
<head> 
	<title> 可编辑下拉框2 </title> 
	<META NAME="Generator" CONTENT="EditPlus"> 
	<META NAME="Author" CONTENT=""> 
	<META NAME="Keywords" CONTENT=""> 
	<META NAME="Description" CONTENT=""> 
</head> 
<body> 
<table border="1" style="border-collapse:collapse "> 
	<tr>
		<td>
				<div style="position:relative;">
							<span id="spanfindvalue1" style="margin-left:200px;width:18px;overflow:hidden;">
							<select id="selectfindvalue1" class="text" style="width:218px;margin-left:-200px"  onchange="this.parentNode.nextSibling.value=this.value">
								<option value="可编辑下拉框" selected>可编辑下拉框</option>
								<option value="456">456</option>
								<option value="123">123</option>
								<option value="456">456</option>
							</select>
							</span><input name="findValue" id="findValue1"  class="text" style="width:200px;position:absolute;left:0px;" onclick="">
				</div>
			</td>
		</tr>											
</table> 
</BODY> 

</HTML>