Question

我有2个Bootstrap下拉菜单，您可以在其中选择项目：

<div class="btn-group onderdeelnaam">    
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="onderdeel1"></button>    
    <ul class="dropdown-menu">    
        <li><a href="#" id="onderdeel1-1">onderdeel1-1</a></li>    
        <li><a href="#" id="onderdeel1-2">onderdeel1-2</a></li>    
    </ul>    
</div>  

<div class="btn-group onderdeelnaam">    
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="onderdeel2"></button>    
    <ul class="dropdown-menu" id="dropdown1">    
        <li><a href="#" id="onderdeel2-1">onderdeel2</a></li>      
    </ul>    
</div>

当我点击li项时，会触发以下脚本，并将这两个框更改为相同名称。

$(function(){    
    $(".dropdown-menu li a").click(function(){     
        $(".btn:first-child").text($(this).text());    
        $(".btn:first-child").val($(this).text());    
        $("button").append("<span class='caret'>");    
    });      
});

所以我选择哪一个并不重要，两个下拉菜单都与我选择的项目名称相同。我试图尝试使用最后一个脚本，只对其中一个菜单进行更改，例如我尝试将.dropdown-menu类更改为id，但没有成功。

Answer 1

您需要修改代码以使用this关键字来引用单击的元素。在那里，您可以使用closest()和find()来检索相关的button元素。试试这个：

$(".dropdown-menu li a").click(function() {
    $(this).closest('.btn-group').find('.btn').text($(this).text()).append("<span class='caret'>");
});

Working example

使用引导菜单选择项目后更改菜单名称

1 个答案: