在引导程序下拉列表菜单中显示所选选项

Question

我的引导程序菜单中有下拉列表.

<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

Answer 2

更改您的 html，如：

 <li class="dropdown">
    <button id="options" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" >Chose option<span class="caret"></span></button>
        <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>

在 javascript 方面这样做：

 <script>

        $(document).ready(function(){
            $(".dropdown-menu li a").click(function(){
            $("#options").text($(this).text());
            });
        });
    </script>