JavaScript帶下拉選單的文字框

antzone發表於2018-07-16
JavaScript

在一些效果中，文字框有這樣的功能，那就是具有類似select下拉框的功能，宛如是集文字框與下拉框功能於一體的控制元件。

下面通過例項程式碼介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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=''}，如果選中項的值為空，那麼文字框的內容為空。

相關文章