实现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带下拉列表的文本框就介绍到这了。

回复

我来回复
  • 暂无回复内容