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

Question

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

JS代码（找到here）：

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

});

我已经尝试了上述的一些有趣的变体。包括一个用每个下拉列表的 div 类的名称替换“.btn:first-child”的方法，然后列出所有这些，希望 JS 知道要更改哪些下拉列表……那没用.

使用的标记（我在 row/col-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>

任何帮助。

更新：

---

总结超过 12 小时工作的挫败感 - 如果您遇到此类错误，请务必清除 Google Chrome 中的缓存！ Chrome 缓存 Javascript。

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

Answer 1

具体来说，你可以考虑这样的事情：

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

Answer 2

我刚刚遇到了类似的问题。要考虑的事情是按钮标签的“id”和 aria-labelled by。但解决问题的方法是将按钮包装在“btn-group”div 中。

（引导程序 4）

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

Answer 3

$(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 4

使用选择器$(".btn:first-child")，您实际上是选择了类btn 的所有元素中的所有第一个子元素。相反，您想要做的是，您需要编写一个选择器，使其仅选择与被选择的下拉列表直接链接的选择器。

您可以执行以下类似的操作，以达到相同的目的：

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

当然，上述内容可能不是直接在您的代码中使用的最佳选择，请相应地修改选择器以适合您的实际 html 代码结构。