jquery - 显示相同内容的两个下拉菜单

Question

我有两个并排显示的下拉菜单。我正在使用 jQuery 脚本，其中在下拉列表中选择的任何内容都会显示在下拉按钮上。我有一个月和一年的下拉列表。

问题:当我选择一个月时，例如三月，然后三月同时显示在月份和年份下拉按钮上。同样，如果我选择 2017 年，它也会显示在月份按钮上，而不是仅显示在年份按钮上。

(我已附上图片以供引用)。

这是我的代码:

<div class="row">

            <div class="btn-group">
                <button class="btn" id="month">Month</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown" style="background-color: transparent;">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                   <li><a tabindex="-1" href="#">January</a></li>
                   <li><a tabindex="-1" href="#">February</a></li>
                    <li><a tabindex="-1" href="#">March</a></li>
            </ul>
            </div>

            <div class="btn-group">
                <button class="btn" id="month">Year</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown" style="background-color: transparent;">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                   <li><a tabindex="-1" href="#">2017</a></li>



                </ul>
         </div>

    </div>

JQuery 脚本:

   <script>

   $(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
    });

    }); </script> 

Answer 1

需要使用 closest() 和 children() 进行如下操作:-

$(function(){
    $(".dropdown-menu li a").click(function(){
      $(this).closest('.btn-group').children('button:first-child').text($(this).text());
      $(this).closest('.btn-group').children('button:first-child').val($(this).text());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="btn-group">
    <button class="btn">Month</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown" style="background-color: transparent;">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" href="#">January</a></li>
    <li><a tabindex="-1" href="#">February</a></li>
    <li><a tabindex="-1" href="#">March</a></li>
  </ul>
</div>

  <div class="btn-group">
    <button class="btn">Year</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown" style="background-color: transparent;">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#">2017</a></li>
    </ul>
  </div>
</div>

注意:- id 每个元素都必须是唯一的，因此可以从按钮中删除 id="month" 或为它们提供唯一的 id