如何在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">

  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

    Option: <span class="selection">Option 1</span><span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

    <li><a href="#">Option 1</a></li>

    <li><a href="#">Option 2</a></li>

    <li><a href="#">Option 3</a></li>

  </ul>

</div>

JQuery代码段

$(".dropdown-menu li a").click(function(){

  $(this).parents(".btn-group").find('.selection').text($(this).text());

  $(this).parents(".btn-group").find('.selection').val($(this).text());

});

我还为“选择”类增加了一个5px的边距权限。