从网上找了份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
转载于:https://blog.51cto.com/kaixinbocai/1165044