可以輸入select下拉選單

admin發表於2017-04-01

實際應用中，可能需要讓select下拉選單具有輸入功能。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  position:relative;
}
#box_span{
  margin-left:100px;
  width:18px;
  overflow:hidden;
}
#box_span select{
  width:118px;
  margin-left:-100px
}
#box input{
  width:100px;
  position:absolute;
  left:-2px;
  top:1px;
  height:13px;
}
</style>
<script>
window.onload=function(){
  var oselect=document.getElementById("sel");
  oselect.onchange=function(){
    this.parentNode.nextSibling.value=this.value
  }
}
</script>
</head>
<body>
<div id="box">
  <span id="box_span">
    <select id="sel">
      <option value="css教程">css教程</option>
      <option value="螞蟻部落">螞蟻部落</option>
      <option value="softwhy.com">softwhy.com</option>
    </select>
  </span><input name="box">
</div>
</body>
</html>

將文字框覆蓋於select下拉選單之上，當選中select下拉選單的時候，就將select下拉選單的值寫入文字框，視覺上實現選中效果。

相關閱讀:

（1）.onchange事件參閱JavaScript change事件一章節。 

（2）.parentNode()方法參閱parentNode一章節。 

（3）.nextSibling屬性參閱JavaScript nextSibling一章節。

相關文章