javascript - 所有 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 类的元素内的列表项内单击 anchor 时，您可以在 DOM 中向上查找 .dropdown-menu该 anchor 元素的父元素。然后您只需更改该特定父项的文本和值。您发布的代码选择了所有下拉菜单，正如@jjk_charles 指出的那样。

JSFiddle