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

});

我尝试过以上一些有趣的变化。包括一个取代＆＃34; .btn：first-child＆＃34;每个下拉列表都有一个div类的名称，然后列出所有这些，希望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 - ＆gt;工具 - ＆gt;清除浏览数据... - ＆gt;选择＆＃34;缓存的图像和文件＆＃34;并清除它。

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标签的。但是解决问题的方法是将按钮包装在“ 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

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

你可以做类似下面的事情来实现同样的目标：

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

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

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

点击事件：

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

可以将children替换为find

所有Bootstrap下拉列表显示相同的项目

4 个答案: