ホームページ > 記事 > ウェブフロントエンド > javascript_javascript スキルで実装されたドロップダウン ボックス機能を備えたテキスト ボックス
javascript_javascript スキルで実装されたドロップダウン ボックス機能を備えたテキスト ボックス
- WBOYオリジナル
- 2016-05-16 16:49:161494ブラウズ
コンテンツを選択するためにオプションのドロップダウン ボックスが必要な場合もありますが、入力をカスタマイズする必要もあります。この要件を満たすために、ほとんどの 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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。