可输入的下拉框

< HTML >   
< HEAD >   
< META http - equiv = ' Content-Type '  content = ' text/html; charset=gb2312 ' >   
< TITLE > 可输入的下拉框 </ TITLE >   
</ HEAD >   
< BODY  >   
  
< div style = " position:relative; " >   
< span style = " margin-left:100px;width:18px;overflow:hidden; " >   
< select style = " width:118px;margin-left:-100px "  onchange = " this.parentNode.nextSibling.value=this.value " >   
< option value = " www.souzz.net " >  souzz  </ option >   
< option value = " www.eWebSoft.com " >  eWebSoft  </ option >   
< option value = " WEB开发者 " >  WEB开发者  </ option >   
</ select ></ span >< input name = " box "  style = " width:100px;position:absolute;left:0px; " >   
</ div >   
</ BODY ></ HTML >  

 

原理:使input组件的绝对位置覆盖select组件的选择框,当select的状态发生改变的时候,使用this.parentNode.nextSibling.value=this.value把select所选择的值赋给input.