html可编辑下拉列表

前言

在HTML中下拉框是不能进行编辑的，我们可通过Select下拉框和input实现commbox功能

思想：

通过绝对定位实现input覆盖Select

通过change事件实现数据的单向绑定

<html> <head> <title>可编辑下拉框</title> <meta charset="UTF-8" /> <style type="text/css">  
        /*input css*/  
        .iInput{  
            position: absolute;  
            width: 99px;  
            height: 16px;  
            left: 1px;  
            top: 2px;  
            border-bottom: 0px;  
            border-right: 0px;  
            border-left: 0px;  
            border-top: 0px;  
        }  
        </style> </head> <body> 
 <div style="position:relative;">      
  <select style="width:120px;"                onchange="document.getElementById('input').value=this.value"> 
   <option value="2017">2017</option> 
   <option value="2016">2016</option> 
   <option value="2015">2015</option> 
   <option value="2014">2014</option> 
  </select> 
   <input id="input" name="input" class="iInput"> 
  </div>
 </body> 
</html>

发表评论