title: selected option in bootstrap dropdown list not working
body: <p>I have attempted some possible solutions to get the selected item from the dropdown list in my bootstrap navigation bar but it doesn't seem to work. Help greatly appreciated. Thanks.</p>
  
  <p>Attached below is the screenshot of the dropdown</p>
  
  <p><a href="https://i.stack.imgur.com/l6iqy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l6iqy.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;li class="nav-item active dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="fa fa-globe" aria-hidden="true"&gt;&lt;/i&gt;
           Language&lt;span id="selected" class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
           &lt;div class="dropdown-menu" aria-labelledby="languageDropdown"&gt;
            &lt;a class="dropdown-item" href="#"&gt;English&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;中文&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>&lt;script&gt;
   $('.dropdown-menu a').click(function(){
      $('#selected').text($(this).text());
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have attempted this to add another function for my other dropdown list. When I click one of the dropdown, the other one changes also.</p>
  
  <pre><code> &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="fa fa-sort-amount-asc" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;span id="sort" class="caret"&gt;Sort&lt;/span&gt;&lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Category&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Date and Time&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Availability&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
  
  
     &lt;script&gt;
   $('.dropdown-menu a').click(function(){
      $('#selected').text($(this).text());
  $('.dropdown-menu a').click(function(){
      $('#sort').text($(this).text());
  
    });
  &lt;/script&gt;
  </code></pre>