A text box with drop-down box function implemented in javascript_javascript skills

Sometimes we need an optional drop-down box to select content, but there is also a need to customize the input. For this requirement, most websites use a drop-down box and an input text to provide choices in parallel or in separate rows. So, we want it to look like a drop-down box that can be entered or selected, so how to do it?

In fact, we can simulate this effect through css position positioning and a little javascript code.

Copy code The code is as follows:

 
 
 


 

    
        
             新建
        
        
             10-NGCFG-update-1000
        
        
             11-NGCFG-update-1000
        
        
             111
        
        
             12-NGCFG-update-1000
        
        
             13-NGCFG-update-1000
        
        
             14-NGCFG-update-1000
        
        
             15-NGCFG-update-1000
        
        
             16-NGCFG-update-1000
        
        
             17-NGCFG-update-1000
        
        
             18-NGCFG-update-1257
        
        
             2-NGCFG-update-100
        
        
             3-NGCFG-update-150
        
        
             4-NGCFG-update-200
        
        
             5-NGCG-update-250
        
        
             6-NGCFG-update-418
        
        
             7-NGCFG-update-500
        
        
             8-NGCFG-update-1000
        
        
             9-NGCFG-update-1000
        
        
             @ALL
        
        
             @CNC-BJ-4
        
        
             CNC-BJ--测试
        
        
             test
        
    
    
 

 <script><br>  var listName = document.getElementById('list-name-for-select');<br>  var listSelect = document.getElementById('list-select').onchange = function(e){<br>   console.log(this)<br>   if(this.value){<br>    listName.value = this.value ' | ' this.options[this.selectedIndex].text;<br>   }else{<br>    listName.value = ''<br>   }<br>  };<br> </script>