可编辑的下拉列表框，有时候很有用

一,基本原理:
  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 >