從網上找了份web前端的面試題，有一道題是設計出既能在文本框中輸入，又能在下拉框中選擇的組件（如下圖）。稍微一想沒有思路，但是這種組件還算經常見到。參考了一下網上別人的代碼，自己也搞了個。
思路：隱藏或者說是遮住下拉菜單的按鈕左側的部分，在按鈕左側該位置放上輸入框。然後利用Javascript，將用戶從下拉菜單選擇的選項的值賦給輸入框。
html代碼：
- <body>
- <form method="get" action="#">
- <p id="select" >
- <select>
- <option value="廣州">廣州</option>
- <option value="深圳">深圳</option>
- <option value="珠海">珠海</option>
- </select>
- </p>
- <p id="input">
- <input type="text" value="廣州" />
- </p>
- </form>
- </body>
css
- <style type="text/css">
- * {
- margin:0;
- padding:0;
- }
- form {
- position:relative;
- }
- #select {
- position:absolute;
- left:200px;
- top:20px;
- width:18px;
- overflow:hidden;
- }
- #select select {
- width:171px;
- margin-left:-153px;
- }
- #input {
- position:absolute;
- left:47px;
- top:20px;
- }
- </style>
註釋： 下拉菜單按鈕的寬度爲18px
input框默認寬度爲149px，每個邊框均爲2px（chrome中）
因而select的寬度爲149 + 2*2 + 18 px = 171px
select元素上的margin-left:-153px;很重要，配合外層框的樣式，使下拉框只顯示最右側 18px寬的按鈕。
Javascript代碼：
- <script type="text/javascript">
- window.onload = init;
- function init(){
- document.getElementsByTagName("select")[0].onchange = function(){
- document.getElementsByTagName("input")[0].value = this.value;
- }
- }
- </script>
效果如下：
參考文章：http://blog.doyoe.com/article.asp?id=163