ホームページ > 記事 > ウェブフロントエンド > javascript_javascript スキルで実装されたドロップダウン ボックス機能を備えたテキスト ボックス
コンテンツを選択するためにオプションのドロップダウン ボックスが必要な場合もありますが、入力をカスタマイズする必要もあります。この要件を満たすために、ほとんどの Web サイトではドロップダウン ボックスと入力テキストを使用して、並列または個別の行に選択肢を提供します。では、入力または選択できるドロップダウン ボックスのように見せたいのですが、どうすればよいでしょうか?
実際、CSS の位置指定と小さな JavaScript コードを使用して、この効果をシミュレートできます。
<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>
本文>