ホームページ  >  記事  >  ウェブフロントエンド  >  javascript_javascript スキルで実装されたドロップダウン ボックス機能を備えたテキスト ボックス

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

WBOY
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 までご連絡ください。