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

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="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" id="options"> <span id="opt">Chose option</span> <span class="caret"></span>
    </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" id="1" href="#" >Option 1</a></li>
        <li><a class="dropdown-item" id="2" href="#">Option 2</a></li>
        <li><a class="dropdown-item" id="3" href="#" >Option 3</a></li>
        <li><a class="dropdown-item" id="4" href="#" >Option 4</a></li>
      </ul>
</div>

<script type="text/javascript">
$(function(){
  $("#1").click(function () {
  $("#opt").text($(this).text());
  });
  $("#2").click(function () {
  $("#opt").text($(this).text());
  });
  $("#3").click(function () {
  $("#opt").text($(this).text());
  });
  $("#4").click(function () {
  $("#opt").text($(this).text());
  });
});
</script>

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>

Answer 3

这应该适用于您：

<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());
  });

您需要在

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