JS實現可編輯下拉框

時間 2019-12-06
原文原文鏈接
<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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。