Ein Textfeld mit Dropdown-Box-Funktion, implementiert in javascript_javascript skills

Manchmal benötigen wir ein optionales Dropdown-Feld zur Auswahl von Inhalten, aber es besteht auch die Notwendigkeit, die Eingabe anzupassen. Für diese Anforderung verwenden die meisten Websites ein Dropdown-Feld und einen Eingabetext, um Auswahlmöglichkeiten parallel oder in separaten Zeilen bereitzustellen. Wir möchten also, dass es wie ein Dropdown-Feld aussieht, das eingegeben oder ausgewählt werden kann. Wie geht das?

Tatsächlich können wir diesen Effekt durch CSS-Positionspositionierung und ein wenig Javascript-Code simulieren.

Code kopieren Der Code lautet wie folgt:

 
 
 


 

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