Javascript 所有引导下拉列表都显示相同的项

我使用一段Js代码来显示引导下拉列表中的选定项。我的ASP.NET页面上有几个下拉列表。当我使用此代码并选择第一个（或任何）下拉列表中的一项时，所有其他下拉列表也会更改其值。我是Javascript和Bootstrap的新手，搜索过类似的问题，但没有找到任何结果

JS代码（已找到）：

我尝试了上述几种有趣的变化。包括一个将“.btn:first child”替换为每个下拉列表的div类名称，然后列出所有下拉列表，希望JS知道要更改哪些下拉列表。。。那没用

使用的标记（我在第/col-md-6行中使用了几个下拉列表）：

选择一个转发到





选择生产联系人

任何帮助都有可能

更新：

---

总结一下12个多小时的工作带来的挫败感——如果你遇到这种错误，一定要清除谷歌浏览器中的缓存！Chrome缓存Javascript

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

使用选择器

$（“.btn:first child”）

可以有效地选择类为

btn

的所有元素中的所有第一个子元素。相反，您要做的是，您需要编写一个选择器，使其只选择直接链接到所选下拉列表的

您可以执行以下类似操作，以实现相同的效果：

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

---

当然，上面可能不是一个直接使用在您的代码中的最佳的东西，因此修改选择器以适合您的实际HTML代码结构。

具体地，您可以考虑一些类似的：

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

这样，当在类

下拉菜单

的元素中的列表项内部单击锚定时，您将沿着DOM查找该锚定元素的

。下拉菜单

父元素。然后只更改特定父级的文本和值。正如@jk_charles所指出的，您发布的代码选择了所有下拉菜单

$（函数（）{
$（“.LIA”下拉菜单）。单击（函数（）{
$（this）.parents（'.dropdown'）.children（'.btn'）.text（$（this.text（））；
$（this）.parents（'.dropdown'）.children（'.btn'）.val（$（this.text（））；
});
});

选择一个转发到





选择生产联系人





我刚刚遇到了类似的问题。需要考虑的是按钮标签的ID和由标记的ARIs。但解决问题的方法是将按钮包装在一个“btn组”分区中

（引导程序4）


编辑详细信息
儿童
您可以尝试从该

（单击的元素）开始导航DOM。看看最近的

函数。我不知道怎么做，但这在我的环境中不起作用。我看到它在链接中起作用，这让我感到困惑。我想知道是不是有什么东西在与这段JS抗争，使它无法正常工作……我添加了对bootstrap.min.css的引用（我有其他的引用）。在此之后，控制台中唯一的错误是启动时出错，表示CSS文件中的某些内容出错。当我实际更改下拉选择项时，Chrom dev tools控制台中没有错误。这太奇怪了，因为我们有完全相同的代码。。。但是它对您有效。顺便说一下，控制台中的错误是“意外的令牌：{”。通过css验证器运行bootstrap.min.css时，会出现几十个错误。我怀疑令牌错误与我的问题有关。@Paul通过cdn发布的代码有一点可能有错误。检查html标题部分，如果单击事件不会触发，并且控制台中没有错误，则表示您将js代码放置在错误的位置。放置some断点检查它是如何工作的。好吧，所有答案都是正确的。想知道为什么吗？Google Chrome缓存Javascript。在清除缓存并将JS放入你的答案（或者其他任何答案）后，下拉列表现在工作正常。GRR Chrome！！！为了避免以后出现这种情况，请将代码放在单独的文件中，并在其中添加时间戳。有很多解决方案可以防止浏览器缓存js。
$(this).parent().parent().parent().find(".caret").text("new text");

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

<div class="btn-group"> <!-- Here -->
   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="editDetailsLink">Edit Details</button>
   <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: top, left; top: 38px; left: 0px;" aria-labelledby="editDetailsLink">
      <a class="dropdown-item" href="#">Retailer</a>
      <a class="dropdown-item" href="#">Websites</a>
   </div>
</div>
<div class="btn-group"> <!-- Here -->
   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="viewChildrenLink">Children</button>
   <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: top, left; top: 38px; left: 0px;" aria-labelledby="viewChildrenLink">
      <a class="dropdown-item" href="#">Retailers</a>
      <a class="dropdown-item" href="#">Ratings</a>
   </div>
</div>