title: How to select bootstrap dropdown menu?
body: <p>I want to show the selected dropdown menu in top(dropdown title). I can show selected item in title when they are in list. I do following  </p>
  
  <pre><code>        &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle toggle2" data-toggle="dropdown" href="#"&gt;Meterial Type &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu menu2"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Wood&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mud&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cloth&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Thread&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Jute&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cotton&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cane&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Bamboo&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
  
               &lt;script&gt;
  
  $(function(){
  
      $(".menu2 li a").click(function(){
  
        $(".toggle2").text($(this).text());
  
     });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But, I try this in dropdown menu in div, I failed.  </p>
  
  <pre><code>        &lt;div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Mud&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Cloth&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Thread&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Jute&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Cotton&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Cane&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Bamboo&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
  
               &lt;script&gt;
  
  $(function(){
  
      $(".menu2 li a").click(function(){
  
        $(".navbarDropdown2").text($(this).text());
  
     });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I use bootstrap 4.1. I follow <a href="https://getbootstrap.com/docs/4.0/components/navbar/#supported-content" rel="nofollow noreferrer">getbootstrap documentation</a></p>