如何实现可编辑的下拉列表框
<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><style>a{color:blue;text-decoration:none}a:hover{color:red}</style></head><body><table style="border:2px outset;background-color:#d2e8FF" width="250" height="100" align="center"> <tr> <td width="100%" align="center" colspan="2"><b>可编辑下拉框</b></td> </tr> <tr> <td width="60%" height="30" align="center"><select name="fason"><option value="可编辑下拉框">可编辑下拉框</option><option value="Andrew">Andrew</option></select> </td> <td width="40%" height="30" align="left"> <input type=button value=" 取值 " onclick="alert(document.getElementsByName('combox_fason')[0].value)"></td> </tr></table><script language="javascript">function combox(obj,select){this.obj=objthis.name=select;this.select=document.getElementsByName(select)[0];/*要转换的下拉框*/}/*初始化对象*/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()}/*初始化结束*/////////对象事件定义///////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=ithis.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()/*作用方法：var obj=new combox(var1,var2)var1:新生成的combox变量(如:a)var2:原下拉框的nameobj.init():对象初始化注意:后台取值时用combox_var2进行取值*/</script><p align="right">作者：<a href="http://fason.nease.net">fason(阿信）</a>欢迎交流!</p></body></html>下面这段代码更强！<input type="text" name="t"><select name="s" onChange="t.value=this.options[this.selectedIndex].value;"><option>-----------</option><option value="test">test</option><option value="haha">haha</option></select>/////////////////////////////////还有<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>.table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}.td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1px solid #ffffff;}.td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1px solid #000000;color:#ffffff;height:15px}.slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0px solid #000000;vertical-align:middle;height:18px;color:#000000}.down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1px solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold}.seldiv{position:absolute;z-index:1000;overflow-x:hidden;border-left:1px solid #000000;border-bottom:1px solid #000000;border-right:1px solid #000000;SCROLLBAR-FACE-COLOR: #d0dff7;SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7;SCROLLBAR-SHADOW-COLOR: #FFFFFF;SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;SCROLLBAR-ARROW-COLOR: #ffffff;SCROLLBAR-TRACK-COLOR: #ffffff;SCROLLBAR-DARKSHADOW-COLOR: #d0dff7}</style><script language="JavaScript">document.onclick=hiddenDiv;function getDivCount() { var arr=document.all; re=0; for (i=0;i<arr.length;i++) { str=arr[i].id; if (str.indexOf("ZfDiv_")==0) { re++; } } return re;}function getI(ObjId) {//取得objId的最后一位数字 for (i=0;i<ObjId.length;i++) { if (ObjId.charAt(i)=="_") return ObjId.substr(i+1,ObjId.length-1); } return 0;}function select_edit(TextObj){//鼠标经过高亮度 TextObj.focus();TextObj.select();}function checkValue(ID){ var sl=document.all["ZfText_"+ID]; var sv=document.all["ZfDiv_"+ID]; var da=document.all["ZfData_"+ID]; sv.style.display='' for(i=0;i<da.rows.length;i++)da.rows[i].style.display='' for(i=0;i<da.rows.length;i++){ if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display='none'; getPosition(ID); }}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}function getPosition(ID){ var sv=document.all["ZfDiv_"+ID]; var sl=document.all["ZfText_"+ID]; var spn=document.all["ZfSpan_"+ID]; var da=document.getElementById("ZfData_"+ID); sv.style.pixelWidth=spn.offsetWidth; da.style.pixelWidth=sv.offsetWidth; sv.style.pixelLeft=getL(spn); sv.style.pixelTop=getT(spn)+sl.offsetHeight+3; if(da.offsetHeight>200){ sv.style.pixelHeight=200; sv.style.overflowY='scroll'; } else { sv.style.pixelHeight=da.offsetHeight; sv.style.overflowY='hidden'; }}function dropDown(ID){ var sv=document.all["ZfDiv_"+ID] var tb=document.all["ZfData_"+ID] if(sv.style.display=='none'){ sv.style.display=''; for(i=0;i<tb.rows.length;i++)tb.rows[i].style.display='' getPosition(ID); } else { sv.style.display='none'; }}//下拉摸拟层function hiddenDiv(){ var o=window.event.srcElement.id; var tb var sv if(o=="") { for (j=0;j<getDivCount();j++) { tb=document.getElementById('ZfData_'+j); sv=document.getElementById('ZfDiv_'+j); for(i=0;i<tb.rows.length;i++) tb.rows[i].style.display=''; sv.style.display='none'; } }}//隐藏模拟层function setValue(obj){var i=getI(obj.parentElement.parentElement.parentElement.id);//alert(obj.parentElement.parentElement.parentElement.id);var sl=document.all["ZfText_"+i];var sv=document.all['ZfDiv_'+i];sl.value=obj.innerText;sv.style.display='none';//sldIndex=obj.parentElement.rowIndex;}//给文本框赋值function over(obj){ obj.className="td_over" obj.title=obj.innerText obj.focus();}//鼠标经过变色function out(obj){ obj.className="td_out"}//鼠标离开还原function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()//增加list的接口,ID表示该组控件是页面中的第几个function add(v,ID){var sv=document.all['ZfDiv_'+ID];if(!v.Trim()){return;}var tb=document.all['ZfData_'+ID];var c=tb.insertRow(tb.rows.length).insertCell();c.innerHTML='<nobr>'+v.Trim()+'</nobr>';c.onmouseover=new Function("over(this)");c.onmouseout=new Function("out(this)");c.onclick=new Function("setValue(this)");c.className="td_out";v='';}//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空function addText(name,DefValue) { var i=getDivCount(); document.write('<span id="ZfSpan_'+i+'" style="border:1 solid #9CA0CB">'); document.write('<input type="text" value="'+DefValue+'" name="'+name+'" id="ZfText_'+i+'" ondblclick="ZfDrop_'+i+'.click()" onmouseover="select_edit(this)" onkeyup="checkValue('+i+')"><input type=button id="ZfDrop_'+i+'" value=">" onclick="this.hideFocus=true;dropDown('+i+');" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=\'\'" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=\'\'"></span>'); document.write('<div id="ZfDiv_'+i+'" style="display:none;"><table id="ZfData_'+i+'" onselectstart="return false" border="0" cellspacing="0" cellpadding="0" name="code">//简化<input type="text" id="tbUnit" style="width:121px;position: absolute" /> <select onchange="document.getElementById('tbUnit').value=this.options[this.selectedIndex].text;" style="width:138px;clip: rect(auto auto auto 120px); position: absolute"><option value="1"> 1</option> <option value="个">个 </option> <option value="件">件 </option> <option value="条">条 </option></select>