JS はドロップダウンメニューをクリックして、選択したコンテンツを入力入力ボックスに同期します。-jsチュートリアル-php.cn

JS はドロップダウンメニューをクリックして、選択したコンテンツを入力入力ボックスに同期します。

小云云

リリース： 2018-01-24 09:18:39

オリジナル

2662 人が閲覧しました

この記事では主に、JS を使用してドロップダウンメニューをクリックして選択したコンテンツを入力ボックスに同期する例を紹介します。これは良い参考値であり、皆様のお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

最近、ブロガーはテストプラットフォームを作成しながらフラスコを学習していましたが、下の図に示すような一般的なシナリオに遭遇しました

入力ボックスグループがあり、ドロップダウンメニューには3つのオプションがあります。そして入力ボックスがあり、コードはブートストラップで書かれており、コードは全員にも投稿されます

<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>

ログイン後にコピー

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

$("#project").on("click", "li", function(){
 $("#proname").val($(this).text());
});

ログイン後にコピー

このコードの意味は、ul のクリックイベントを監視することです。オブジェクトは以下の li 要素です。li がクリックされると、li 内のテキストが取得され、入力ボックスの値に代入されます。得られる効果は以下の通り。

JS はドロップダウン メニューをクリックして、選択したコンテンツを入力入力ボックスに同期します。

JS はドロップダウンメニューをクリックして、選択したコンテンツを入力入力ボックスに同期します。