可編輯下拉框的2種實現方式

2024-05-06 16:07:11

字體：大中小

來源：轉載

供稿：網友

下拉框想必大家都有見過，可編輯的下拉框就不多見了吧，本例為大家介紹個不錯的實現方法，需要的朋友可以參考下

可編輯下拉框-HTML

復制代碼代碼如下:

可編輯下拉框-JS

復制代碼代碼如下:

<html>
<head>
<meta content="Microsoft FrontPage 5.0">
<meta content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可編輯下拉框</title>
</head>
<body>
<table>
<tr>
<td>
<select>
<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 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()

}
/*初始化結束*/

////////對象事件定義///////
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>