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

Question

我正在使用bootstrap 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

这有效，但是很丑。 更改：

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

至：

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

我敢肯定有一个更好的方式来做到这一点，但因为你是在点击<a>内<li>一个内<ul> .parent().parent()siblings()...做的技巧，因为它将选择具有.dropdown-toggle类的<ul>的兄弟，并将其显示文本更改为click <a>标记的显示文本。

希望有道理！

编辑添加插入号。

引导示例

Answer 2

该解决方案比使用parent（）jQuery更干净，因为它找到了最近的（遍历dom树）类下拉列表，然后在其中找到了dropdown-toggle类（遍历树）。 只要您的下拉菜单都在外部div中具有类dropdown，而在内部div中具有dropdown-toggle，则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 3

这里是执行此操作的一种干净方法： http : //jsfiddle.net/4g01b2tb/2/

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

});