所有Bootstrap下拉菜单显示相同的项目

Question

我正在使用一段Js代码来显示Bootstrap下拉菜单的选定项目。我的ASP.NET页面上有几个下拉菜单。当我使用此代码并选择第一个（或任何）下拉列表的项目时，所有其他下拉列表也会更改它们的值。我是一个新手，Javascript和引导，并已经寻找像这样的问题，但没有发现任何结果...

JS代码（发现here）：

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

}); 

我已经尝试了几以上的有趣变化。包括一个替换“.btn：first-child”和每个单独下拉列表的div类的名称，然后列出所有这些，希望JS知道要更改哪些下拉列表... 。

标记中使用（我在行/列-MD-6使用多个下拉菜单）：

<div class="row"> 
     <div class="col-md-6"> 
      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" type="button" id="ddlForwardTo" data-toggle="dropdown"> 
        Select a Forward To 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" type="button" id="ddlManufacturing" data-toggle="dropdown"> 
        Select a Manufacturing contact 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

任何帮助appeciated。

UPDATE：

---

综上所述超过12小时的工作的挫折 - 一定要明确在谷歌浏览器的缓存，如果你得到这种类型的错误！ Chrome缓存Javascript。

Chrome - >工具 - >清除浏览数据... - >选择“缓存的图像和文件”并清除它。

Answer 1

$(function(){ 
 
    $(".dropdown-menu li a").click(function(){ 
 
    $(this).parents('.dropdown').children('.btn').text($(this).text()); 
 
    $(this).parents('.dropdown').children('.btn').val($(this).text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
     <div class="col-md-6"> 
 
      <div class="dropdown"> 
 
       <button class="btn btn-default dropdown-toggle" type="button" id="ddlForwardTo" data-toggle="dropdown"> 
 
        Select a Forward To 
 
        <span class="caret"></span> 
 
       </button> 
 
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <div class="dropdown"> 
 
       <button class="btn btn-default dropdown-toggle" type="button" id="ddlManufacturing" data-toggle="dropdown"> 
 
        Select a Manufacturing contact 
 
        <span class="caret"></span> 
 
       </button> 
 
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div>

中单击事件：

$(this).parents(".dropdown").children(".btn").text($(this).text()); 

可能。将children更改为find

Answer 2

使用选择器$(".btn:first-child")，您可以有效地选择所有元素中的第一个子元素，其类别为btn。相反，你想要做的是，你需要编写一个选择器，以便它只会选择直接链接到所选下拉列表的那个选择器。

你可以做类似的像下面的东西，以达到相同的：

$(this).parent().parent().parent().find(".caret").text("new text"); 

当然，上面可能不能直接在代码中使用，修改，选择相应适合的最佳映入实际的html代码结构。

Answer 3

具体来说，你可以考虑类似：

$(function(){ 
    $(".dropdown-menu li a").click(function(){ 
     $(this).parents('.dropdown-menu').siblings('.btn').text($(this).text()); 
     $(this).parents('.dropdown-menu').siblings('.btn').val($(this).text()); 
    }); 
}); 

这样，当点击一个锚列表项的内部dropdown-menu你出差了DOM类的元素中时，发现.dropdown-menu父锚的元件。然后，您只能更改该特定父级的文本和值。您发布的代码选择了所有的下拉菜单作为@jjk_charles指出。

JSFiddle