JS实现可编辑下拉框

最新推荐文章于 2018-08-22 14:47:00 发布

weixin_33724570

最新推荐文章于 2018-08-22 14:47:00 发布

阅读量350

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3647620/blog/1552529

版权

2019独角兽企业重金招聘Python工程师标准>>>

<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<mce:script language="javascript" src="combox.js" mce_src="combox.js"></mce:script> 
</HEAD> 
<BODY> 
<table border="1" style="border-collapse:collapse " mce_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> 
<p> </p>
<p> </p>
<mce: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; 
}　　 
// --></mce:script>
</BODY> 
</HTML>

转载于:https://my.oschina.net/u/3647620/blog/1552529