javascript实现的一个带下拉框功能的文本框_javascript技巧

有时我们需要一个可选的下拉框来选取内容，但是但是又有可以自定义输入的需求。对于这种需求，大部分网站使用的都是一个下拉框和一个 input text ，并列或分行给出选择。那么，我们希望它看上去像一个可以输入也可以选择的下拉框，那该如何做呢？

其实我们可以通过 css position 定位及少许的 javascript 代码，模拟出来这种效果。

复制代码 代码如下:

 
 
 


 

    
        
             新建
        
        
             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>