如何在下拉列表中显示所选列表项的文本？

Question

我正在使用 bootstrap 下拉菜单 html 并且我正在尝试显示所选项目的文本 注意： 我有一组 3 个下拉菜单:

<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>');

我确信有更好的方法，但由于您是在 <ul>、<li>、.parent().parent()siblings()... 中单击 <a>这样做的技巧，因为它将 select 具有 .dropdown-toggle 的 class 的兄弟姐妹 select，并将其显示文本更改为点击 <a> 标签。

希望这是有道理的！

已编辑 添加插入符号。

Bootply Example

Answer 2

此解决方案比使用 parent() jquery 更简洁，因为它找到最近的（向上移动 dom 树）class 下拉列表，然后在其中找到下拉切换 class（沿着树向下移动）。只要您的下拉菜单在外部 div 中都有 class 下拉菜单，在内部 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);

});

如何在下拉列表中显示所选列表项的文本？

How to display text of selected List item on dropDown?

javascript

jquery

twitter-bootstrap