从网上找了份web前端的面试题，有一道题是设计出既能在文本框中输入，又能在下拉框中选择的组件（如下图）。稍微一想没有思路，但是这种组件还算经常见到。参考了一下网上别人的代码，自己也搞了个。

思路：隐藏或者说是遮住下拉菜单的按钮左侧的部分，在按钮左侧该位置放上输入框。然后利用Javascript，将用户从下拉菜单选择的选项的值赋给输入框。

html代码：

 
  
  1. <body> 
  2. <form method="get" action="#"> 
  3.     <p id="select" > 
  4.         <select> 
  5.             <option value="广州">广州</option> 
  6.             <option value="深圳">深圳</option> 
  7.             <option value="珠海">珠海</option> 
  8.         </select> 
  9.     </p> 
  10.     <p id="input"> 
  11.         <input type="text" value="广州" /> 
  12.     </p> 
  13. </form> 
  14. </body> 
 
  
css
 
  
 
  
  1. <style type="text/css"> 
  2. * { 
  3.     margin:0; 
  4.     padding:0; 
  5. } 
  6. form { 
  7.     position:relative; 
  8. } 
  9.  
  10. #select { 
  11.     position:absolute; 
  12.     left:200px; 
  13.     top:20px; 
  14.     width:18px; 
  15.     overflow:hidden; 
  16. } 
  17. #select select { 
  18.     width:171px; 
  19.     margin-left:-153px; 
  20. } 
  21. #input { 
  22.     position:absolute; 
  23.     left:47px; 
  24.     top:20px; 
  25. } 
  26. </style> 
 
  
 
 
  
注释：  下拉菜单按钮的宽度为18px
 
  
 input框默认宽度为149px，每个边框均为2px（chrome中）
 
  
 因而select的宽度为149 + 2*2 + 18 px = 171px
 
  
        select元素上的margin-left:-153px;很重要，配合外层框的样式，使下拉框只显示最右侧         18px宽的按钮。
 
  
Javascript代码：
 
  
 
  
  1. <script type="text/javascript"> 
  2.     window.onload = init; 
  3.     function init(){ 
  4.         document.getElementsByTagName("select")[0].onchange = function(){ 
  5.             document.getElementsByTagName("input")[0].value = this.value; 
  6.         } 
  7.     } 
  8. </script> 
 
  
效果如下：
 
  
 
  
 
  
参考文章：http://blog.doyoe.com/article.asp?id=163