如何在Bootstrap按钮下拉标题中显示所选项目

Question

我在我的应用程序中使用bootstrap Dropdown组件，如下所示：

<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”）。

Answer 1

我能够稍微改善Jai的工作答案，如果你有一个以上的按钮下拉，并且有一个非常好的演示文稿，它适用于bootstrap 3：按钮的代码<div class="btn-group">&nbsp; <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">&nbsp; &nbsp; Option: <span class="selection">Option 1</span><span class="caret"></span>&nbsp; </button>&nbsp; <ul class="dropdown-menu" role="menu">&nbsp; &nbsp; <li><a href="#">Option 1</a></li>&nbsp; &nbsp; <li><a href="#">Option 2</a></li>&nbsp; &nbsp; <li><a href="#">Option 3</a></li>&nbsp; </ul></div>JQuery代码段$(".dropdown-menu li a").click(function(){&nbsp; $(this).parents(".btn-group").find('.selection').text($(this).text());&nbsp; $(this).parents(".btn-group").find('.selection').val($(this).text());});我还为“选择”类增加了一个5px的边距权限。