实现JavaScript带下拉列表的文本框
JavaScript带下拉列表的文本框属于前端实例代码,有关更多实例代码大家可以查看。
在一些效果中,文本框有这样的功能,那就是具有类似select下拉框的功能,宛如是集文本框与下拉框功能于一体的控件。
下面通过实例代码介绍一下如何实现此功能。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .list-name-input{ color:#333; font-size:15px; font-weight:bold; height:50px; margin:0px; padding:0px; position:relative; width:530px; } .list-name-for-select{ border:0; color:#555; height:20px; lighting-color:rgb(255, 255, 255); line-height:20px; margin:0 0 10px 0; outline-color:#555; outline-offset:0px; outline-style:none; outline-width:0px; padding:4px 6px; position:absolute; top:1px; left:3px; vertical-align:middle; width:486px; } .list-name-input-for-select:focus{ border:0; border-radius:0; } .list-select{ background-color:#FFF; border:1px #ccc solid; border-radius:4px; color:#555; cursor:pointer; height:30px; left:0px; margin:0 0 10px 0; padding:4px 6px; position:absolute; top:0px; vertical-align:middle; white-space:pre; width:530px; } </style> <script type="text/javascript"> window.onload=function(){ var listName=document.getElementById('list-name-for-select'); var listSelect=document.getElementById('list-select').onchange=function(e){ if(this.value){ listName.value=this.value + ' | ' + this.options[this.selectedIndex].text; } else{ listName.value='' } }; } </script> </head> <body> <div id="list-name-input" class="list-name-input"> <select type="text" class="list-select" id="list-select"> <option value="">--请选择--</option> <option value="0">前端教程网一</option> <option value="1">前端教程网二</option> <option value="2">前端教程网三</option> <option value="3">前端教程网四</option> <option value="4">前端教程网五</option> <option value="5">前端教程网六</option> <option value="6">前端教程网七</option> <option value="7">前端教程网八</option> </select> <input type="text" class="name item-width list-name-for-select" id="list-name-for-select"> </div> </body> </html>
点击文本框的右侧按钮可以出现下拉菜单效果,下面介绍一下它的实现过程。
一.实现原理:
原理非常简单,文本框和select下拉菜单都采用的绝对定位,没有设置z-index属性值,后面的文本框能够覆盖select下拉菜单,经过覆盖之后,select下拉菜单的第一项"--请选择--"会被覆盖,只会显示下拉箭头。点击箭头会出现下拉菜单,选中后能够将下拉菜单的值和文本内容写入文本框。
二.代码注释:
(1).window.onload=function(){},当文档加载完毕再去执行函数中的代码。
(2).var listName=document.getElementById('list-name-for-select'),获取文本框元素对象。
(3).var listSelect=document.getElementById('list-select').onchange=function(e){},注册change事件处理函数。
(4).if(this.value){listName.value=this.value + ' | ' + this.options[this.selectedIndex].text;},如果下拉菜单选中项的值不为空,就将当前选中项的value值和文本内容写入文本框。
(5).else{listName.value=''},如果选中项的值为空,那么文本框的内容为空。
JavaScript带下拉列表的文本框,这样的场景在实际项目中还是用的比较多的,关于JavaScript带下拉列表的文本框就介绍到这了。