ブートストラップドロップダウンリストで選択されたオプションが機能しない

Question

私は、ブートストラップナビゲーションバーのドロップダウンリストから選択したアイテムを取得する可能性のある解決策を試しましたが、動作しないようです。ヘルプは非常に感謝します。ありがとう。以下に添付

は、私は私の他のドロップダウンリストのために別の機能を追加するためにこれをしようとしているドロップダウン

<li class="nav-item active dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" 
     aria-haspopup="true" aria-expanded="false"><i class="fa fa-globe" aria-hidden="true"></i> 
     Language<span id="selected" class="caret"></span></a> 
     <div class="dropdown-menu" aria-labelledby="languageDropdown"> 
      <a class="dropdown-item" href="#">English</a> 
      <a class="dropdown-item" href="#">中文</a> 
     </div> 
     </li> 

のjQuery

<script> 
$('.dropdown-menu a').click(function(){ 
    $('#selected').text($(this).text()); 
    }); 
</script> 

のスクリーンショットです。ドロップダウンの1つをクリックすると、もう1つも変更されます。

<li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" 
     aria-haspopup="true" aria-expanded="false"><i class="fa fa-sort-amount-asc" aria-hidden="true"></i> 
     <span id="sort" class="caret">Sort</span></a> 
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Category</a> 
      <a class="dropdown-item" href="#">Date and Time</a> 
      <a class="dropdown-item" href="#">Availability</a> 
     </div> 
     </li> 



    <script> 
$('.dropdown-menu a').click(function(){ 
    $('#selected').text($(this).text()); 
$('.dropdown-menu a').click(function(){ 
    $('#sort').text($(this).text()); 

    }); 
</script> 

Answer 1

1. スパンを選択するには、クラスを使用します。
2. 使用.closest()はスパンコンソールで見ることができるどのようなエラー

$('.dropdown-menu a').click(function() { 
 
    $(this).closest('li').find('.caret').text($(this).text()); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 

 
    <li class="nav-item dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-sort-amount-asc" aria-hidden="true"></i> 
 
     Sort<span id="sort" class="caret"></span></a> 
 
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
 
     <a class="dropdown-item" href="#">Category</a> 
 
     <a class="dropdown-item" href="#">Date and Time</a> 
 
     <a class="dropdown-item" href="#">Availability</a> 
 
    </div> 
 
    </li> 
 
    <li class="nav-item active dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-globe" aria-hidden="true"></i> 
 
     Language<span id="selected" class="caret"></span></a> 
 
    <div class="dropdown-menu" aria-labelledby="languageDropdown"> 
 
     <a class="dropdown-item" href="#">English</a> 
 
     <a class="dropdown-item" href="#">中文</a> 
 
    </div> 
 
    </li> 
 

 

 
</ul>