javascript_javascript スキルで実装されたドロップダウン ボックス機能を備えたテキスト ボックス

コンテンツを選択するためにオプションのドロップダウン ボックスが必要な場合もありますが、入力をカスタマイズする必要もあります。この要件を満たすために、ほとんどの Web サイトではドロップダウン ボックスと入力テキストを使用して、並列または個別の行に選択肢を提供します。では、入力または選択できるドロップダウン ボックスのように見せたいのですが、どうすればよいでしょうか?

実際、CSS の位​​置指定と小さな 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

<オプション値= 19">
@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>