在引导下拉菜单中显示选择的选项 [英] Show selected option in bootstrap dropdown list menu

问题描述

我的引导菜单中有下拉列表。

I have dropdown list in my bootstrap menu.

<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>

我试图在下拉列表中选择选项，而不是选择选项，就像现在一样。我已经尝试了在这个和其他一些网站上找到的几个解决方案，但是不能让它们中的任何一个工作。

I'm trying to get selected option in dropdown as title of dropdown instead of "chose option", as it is now. I have tried several solutions found on this and some other sites, but can't make any of them to work.

有人可以帮忙吗？

推荐答案

这应该适合您：

This should work for you:

<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>

脚本：

And the script:

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

您需要将< span>

You need to wrap the text 'Choose option' inside <span> to modify its value on selection.

以下是工作代码： http://liveweave.com/U4BpiH

这篇关于在引导下拉菜单中显示选择的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！