如何在dropDown上显示选定列表项的文本？

Question

我正在使用引导dropDown html，并且我试图显示所选项目的文本注释：，我有一组3 dropDowns：

<ul id="filters" class="nav navbar-nav navbar-right">
    <li class="option-combo dropdown  Agency"> 
        <a class="btn btn-default btn-lg dropdown-toggle">
            Agency <span class="caret"></span>
        </a>
        <ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agency">
            <li><a class="btn btn-default btn-lg" href="#">All</a></li>
            <li><a class="btn btn-default btn-lg selected" href="#filter-agency-TBWA">TBWA</a></li>
            <li><a class="btn btn-default btn-lg" href="#filter-agency-Ogilvy">Ogilvy</a></li>
        </ul>
    </li>
    <li class="option-combo dropdown Client"> 
        <a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
            Client <span class="caret"></span>
        </a>
        <ul class="filter option-set dropdown-menu">
            <li><a href="#" data-filter-value="">All</a></li>
            <li><a class="btn btn-default btn-lg" href="#filter-client-Sky" data-filter-value=".Sky">Sky</a></li>
            <li><a class="btn btn-default btn-lg" href="#filter-client-Vodafone" data-filter-value=".Vodafone">Vodafone</a></li>
        </ul>
    </li>
    <li class="option-combo dropdown Year"> 
        <a class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
            Client <span class="caret"></span>
        </a>
        <ul class="filter option-set dropdown-menu">
            <li><a class="btn btn-default btn-lg" ref="#" data-filter-value="">All</a></li>
            <li><a class="btn btn-default btn-lg" href="#filter-year-y2013">2013</a></li>
            <li><a class="btn btn-default btn-lg" href="#filter-year-y2014">2014</a></li>
            <li><a class="btn btn-default btn-lg" href="#filter-year-y2012">2012</a></li>
        </ul>
    </li>
</ul>

我在没有运气的情况下尝试的jQuery：

$('.filter').on('click', 'a', function() {
    var $text = $(this).text();
    $(this).prev(".dropdown-toggle").text($text);
});

Answer 1

这个解决方案比使用父() jquery更干净，因为它找到最近的类下拉(沿dom树向上移动)类下拉列表，然后在其中找到下拉切换类(沿着树向下移动)。只要您的下拉列表都有外部div中的类下拉列表和内部div中的下拉菜单，那么您的html的结构顺序就无关紧要了：

$('.filter').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

希望这能帮上忙！

Answer 2

这很管用，但很难看。更改：

$(this).prev(".dropdown-toggle").text($text);

至：

$(this).parent().parent().siblings(".dropdown-toggle").html($text + ' <span class="caret"></span>');

我确信有更好的方法可以做到这一点，但是既然您在<a>中单击<ul>中的<li>，.parent().parent()siblings()...就能做到这一点，因为它将选择具有.dropdown-toggle类的<ul>的同级，并将其显示文本更改为单击<a>标记的显示文本。

希望这是合理的！

编辑了以添加插入符号。

启动实例

Answer 3

这里有一种干净的方法可以做到这一点：http://jsfiddle.net/4g01b2tb/2/

$('.filter').click(function (event) {
    var targetText=event.target.text;
    $(this).prev('.btn').text(targetText);

});