首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Bootstrap Button下拉标题中显示选定项目

如何在Bootstrap Button下拉标题中显示选定项目
EN

Stack Overflow用户
提问于 2012-11-18 12:18:21
回答 12查看 422.8K关注 0票数 185

我在我的应用程序中使用bootstrap下拉组件,如下所示:

代码语言:javascript
复制
<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Item I</a></li>
       <li><a tabindex="-1" href="#">Item II</a></li>
       <li><a tabindex="-1" href="#">Item III</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1" href="#">Other</a></li>
    </ul>
</div>

我希望将所选项目显示为btn标签。换句话说,将“请从列表中选择”替换为已选择的列表项目(“项目I”、“项目II”、“项目III")。

EN

回答 12

Stack Overflow用户

发布于 2014-02-25 06:19:00

针对Bootstrap 3.3.4进行了更新:

这将允许您为每个元素提供不同的显示文本和数据值。它还将在选定内容时保留插入符号。

JS:

代码语言:javascript
复制
$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

HTML:

代码语言:javascript
复制
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

JS Fiddle Example

票数 153
EN

Stack Overflow用户

发布于 2016-01-25 04:24:02

这个单一的jQuery函数将完成您所需的所有工作。

代码语言:javascript
复制
$( document ).ready(function() {
    $('.dropdown').each(function (key, dropdown) {
        var $dropdown = $(dropdown);
        $dropdown.find('.dropdown-menu a').on('click', function () {
            $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
        });
    });
});
票数 13
EN

Stack Overflow用户

发布于 2019-02-23 21:08:14

使用多个下拉菜单的另一种简单方法(Bootstrap 4)

代码语言:javascript
复制
    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });
票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13437446

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档