可編輯下拉框的2種實(shí)現(xiàn)方式

更新時(shí)間：2014年06月13日 09:20:03 投稿：whsnow

下拉框想必大家都有見過(guò)，可編輯的下拉框就不多見了吧，本例為大家介紹個(gè)不錯(cuò)的實(shí)現(xiàn)方法，需要的朋友可以參考下

可編輯下拉框-HTML

 
<div style="position:relative;"> 
<select style="width:120px;" onchange="document.getElementById('input').value=this.value"> 
<option value="A類">A類</option> 
<option value="B類">B類</option> 
<option value="C類">C類</option> 
<option value="D類">D類</option> 
</select> 
<input id="input" name="input" style="position:absolute;width:99px;height:16px;left:1px;top:2px;border-bottom:0px;border-right:0px;border-left:0px;border-top:0px;"> 
</div> 

可編輯下拉框-JS

復(fù)制代碼代碼如下:

 
<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]; 
/*要轉(zhuǎn)換的下拉框*/ 
} 
/*初始化對(duì)象*/ 
combox.prototype.init=function(){ 
var inputbox="<input name='combox_"+this.name+"' onchange='"+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.onchange=new Function(this.obj+".change()") 
this.change() 

} 
/*初始化結(jié)束*/ 

////////對(duì)象事件定義/////// 
combox.prototype.find=function(){ 
/*當(dāng)搜索到輸入框的值時(shí),下拉框自動(dòng)定位*/ 
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()}; 
} 
////////對(duì)象事件結(jié)束/////// 
/*公用定位函數(shù)(獲取控件絕對(duì)坐標(biāo))*/ 
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 
} 
/*結(jié)束*/ 
</script> 
<script language="javascript"> 
var a=new combox("a","fason") 
a.init() 
</script> 

</body> 

</html> 