如何选择引导下拉菜单？答案

【问题标题】：How to select bootstrap dropdown menu?如何选择引导下拉菜单？
【发布时间】：2018-04-18 14:25:16
【问题描述】：

我想在顶部（下拉标题）中显示选定的下拉菜单。当它们在列表中时，我可以在标题中显示所选项目。我会关注

        <li class="dropdown"><a class="dropdown-toggle toggle2" data-toggle="dropdown" href="#">Meterial Type <span class="caret"></span></a>
          <ul class="dropdown-menu menu2">
        <li><a href="#">Wood</a></li>
        <li><a href="#">Mud</a></li>
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Jute</a></li>
        <li><a href="#">Cotton</a></li>
        <li><a href="#">Cane</a></li>
        <li><a href="#">Bamboo</a></li>
          </ul>
        </li>
        <li>

             <script>

$(function(){

    $(".menu2 li a").click(function(){

      $(".toggle2").text($(this).text());

   });

});
</script>

但是，我在 div 的下拉菜单中尝试此操作，但失败了。

        <div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
          <a class="dropdown-item" href="#">Mud</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cloth</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Thread</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Jute</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cotton</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cane</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Bamboo</a>
        </div>
      </li>


             <script>

$(function(){

    $(".menu2 li a").click(function(){

      $(".navbarDropdown2").text($(this).text());

   });

});
</script>

我使用引导程序 4.1。我关注getbootstrap documentation

【问题讨论】：

标签： drop-down-menu

【解决方案1】：

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Object Type
        </a>

        <div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
          <a class="dropdown-item" href="#">Mud</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cloth</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Thread</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Jute</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cotton</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cane</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Bamboo</a>
        </div>
      </li>


             <script>

$(function(){

    $(".menu2 li a").click(function(){

      $(".toggle2").text($(this).text());

   });

});
</script>

【讨论】：