兩個下拉菜單顯示相同的內容

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

需要做的是像下面使用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"或提供他們兩人的唯一身份證號碼

Answer 2

使用相同ID爲月份和年份。

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

一定要記住每個標籤元素都有唯一的id。更改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()); 
    }); 
});