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()...会诀窍，因为它会选择<ul>类的.dropdown-toggle兄弟，并将其显示文字更改为点击<a>代码的显示文字。

希望有意义！

已编辑以添加插入符号。

Bootply Example

Answer 2

这个解决方案比使用parent（）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 3

这是一个干净的方法：http://jsfiddle.net/4g01b2tb/2/

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

});

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

3 个答案: