一,基本原理: ComboBox实质上就是listbox+input, 首先初始化的时候将listbox 和input文本框重叠,设定listbox的clip区域, 当选定了下拉框的项时(onchange事件被触发),将listbox选择的文本填入input文本框,
二,源代码: 下面是一个基于asp的代码,将代码完全复制存为一个asp或htm文件执行就可看出效果.
三, 缺点: 该ComboBox有个明显的缺陷就是select Object必须选择absolute风格, 这对于位置不固定的listbox比较难于确定它的位置.
< HTML > < HEAD > < SCRIPT LANGUAGE ="javascript" > ... function Body_Init() ...{ var oSelect = document.frmMain.ddlState; var oText = document.frmMain.txbState; var iLeft= oSelect.offsetLeft; var iTop = oSelect.offsetTop; var iWidth=oSelect.clientWidth; var iHeight=oSelect.clientHeight; oSelect.style.clip='rect(0,'+iWidth+','+iHeight+','+(iWidth-18)+')'; oText.style.width=iWidth; oText.style.height=iHeight; oText.style.top =iTop; oText.style.left=iLeft; } function Combo_Select(oSelect,oText) ...{ oText.value=oSelect.options[oSelect.selectedIndex].text; } function Text_ChkKey(oSelect,oText) ...{ if(event.keyCode==13) ...{ var nIndex=HasTheValue(oText.value,oSelect); if(nIndex !=-1 && nIndex !=oSelect.selectedIndex) ...{ oSelect.selectedIndex=nIndex; } } } function HasTheValue(name,oSelect) ...{ if(oSelect.options.length<1) return -1; var i=0; for(i=0;i<oSelect.options.length;i++) ...{ if(oSelect.options[i].text==name) return i; } return -1; } </ SCRIPT > </ HEAD > < BODY onload ="javascript:Body_Init();" > < table width =50% width =50% align ="center" valign ="middle" > < tr >< td > < SELECT STYLE ="position:absolute;left:0;top:0;" ONCHANGE ="Combo_Select(this,pText)" NAME ="pCombo" > < option value ="d" > test1 < option value ="dd" > test2 </ SELECT > < INPUT STYLE ="position:absolute;" onKeyPress ="Text_ChkKey(pCombo,this)" TYPE ="TEXT" NAME ="pText" > </ td ></ tr > </ table > </ BODY > </ HTML >