ドロップダウンメニューをクリックして選択した内容を入力ボックスに同期するJS実装例-jsチュートリアル-php.cn

ドロップダウンメニューをクリックして選択した内容を入力ボックスに同期するJS実装例

韦小宝

リリース： 2018-01-24 09:58:04

オリジナル

2939 人が閲覧しました

以下のエディターは、JS を使用してドロップダウンメニューをクリックして、選択したコンテンツを入力ボックスに同期する方法の例を共有します。これは、JS の学習に役立つと思います。みんなに。 JS に興味がある場合は、編集者をフォローして見てください最近、ブロガーはテストプラットフォームを作成しながら flask を学習していて、下の図に示すような一般的なシナリオに遭遇しました

これは入力ボックスグループ

には、ドロップダウンメニューに 3 つのオプションがあり、コードは

bootstrap に書かれています。私の目的は、オプションをクリックするときです。このドロップダウンメニューでは、値を自動的に取得して入力することができるため、以前のバージョンでは入力が 1 つしかなかったときにユーザーが手動で入力する手間が省けます。同期を行うにはどうすればよいでしょうか? もちろん、監視には js を使用する必要がありますが、これは比較的簡単です。

<p class="input-group-btn">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    项目名称
    <span class="caret"></span>
   </button>
   <ul id="project" class="dropdown-menu">
    <li value="account"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >account</a></li>
    <li class="pider"></li>
    <li value="drive"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >drive</a></li>
    <li class="pider"></li>
    <li value="qing"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qing</a></li>
   </ul>
  </p>

ログイン後にコピー

このコードの意味は、ul のクリックイベント

を監視することです。

オブジェクト

は、li がクリックされると、li 内のテキストが取得され、入力入力ボックスの値に割り当てられます。これにより、以下のような効果が得られます。

ドロップダウンメニューをクリックして選択したコンテンツを入力ボックスに同期する上記の JS 実装は、エディターによって共有されるすべてのコンテンツであり、JS を学習するすべての人に何らかの助けになれば幸いです。！