网络上有很多可输入文字的下拉框,有Asp.Net的服务器控件,有结合Javascript做成的控件,或者其它商家开发的第三方控件,复杂度高,通用性不强,有些小题大做的味道, 其实用简单的CSS和javascript即可生成一个非常漂亮并且简便实用的可输入文字下拉框。
<
html
>
< head >
< 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 ="http://user.qzone.qq.com/371766377" > 我的QQ空间 </ option >
< option value ="http://blog.csdn.net/xuchangwei/" > 我的CSDN博客 </ option >
< option value ="http://i.mop.com/xuchangwei0101/blog" > 我的猫扑博客 </ option >
</ select >
</ span >
< input name ="box" style ="width:100px;position:absolute;left:0px;" >
</ div >
</ body >
</ html >
< head >
< 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 ="http://user.qzone.qq.com/371766377" > 我的QQ空间 </ option >
< option value ="http://blog.csdn.net/xuchangwei/" > 我的CSDN博客 </ option >
< option value ="http://i.mop.com/xuchangwei0101/blog" > 我的猫扑博客 </ option >
</ select >
</ span >
< input name ="box" style ="width:100px;position:absolute;left:0px;" >
</ div >
</ body >
</ html >