javascript - 在 Bootstrap 下拉列表菜单中显示选定的选项

Question

我的 Bootstrap 菜单中有下拉列表。

<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</li>

我正在尝试将下拉列表中的选定选项作为下拉列表的标题，而不是像现在这样的“选择选项”。我已经尝试了在这个网站和其他一些网站上找到的几种解决方案，但无法使它们中的任何一个起作用。

有人可以帮忙吗？

Answer 1

这应该适合你:

<div class="dropdown">
    <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
      <span id="selected">Chose option</span><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>

和脚本:

  $('.dropdown-menu a').click(function(){
    $('#selected').text($(this).text());
  });

您需要将文本“选择选项”包裹在 <span> 中在选择时修改其值。

这是工作代码:http://liveweave.com/U4BpiH