Question

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

问题：当我选择一个月时，例如3月，然后3月显示在月份和年份下拉按钮上。同样，如果我选择说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

在月份和年份使用相同的ID。

<button class="btn" id="month">Month</button>
 <button class="btn" id="month">Year</button>

始终记住每个标记元素都有唯一的ID。更改ID并再次检查。

Answer 2

需要使用closest()和children()执行此操作： -

＆＃13;

$(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());
    });
});

＆＃13;

<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>

＆＃13;

注意： - id每个元素必须是唯一的，因此要么从按钮中删除id="month"，要么为这两个元素提供唯一ID

Answer 3

尝试使用.closest()获取最近的父.btn-group，然后.find()获取第一个按钮。

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

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

3 个答案: