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

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

有人可以帮忙吗？

- onedevteam.com

---

可能是重复的问题：jQuery从下拉列表中获取选定选项 - Liam Sorsby

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

- Ganesh Kumar

---

如何允许在HTML代码中进行多选？ - sasori

我正在使用这个解决方案来处理一个不止一个下拉菜单的表单，但是如果我为span使用相同的id（selected），那么下拉菜单会出现奇怪的问题，并开始在其他下拉菜单中显示所选的span。是否有任何方法可以在有多个下拉菜单时应用此解决方案，而无需为每个单独的span设置不同的id？ - Lowtrux

@Ganesh，如果href设置为某个链接而不是#，则此方法无效。由于页面被重定向，JavaScript代码无法按预期工作。 - Sejal Shah

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>

- Nivs

---

如果href设置为某个链接，这将无效。页面会被重定向。 - Sejal Shah

Answer 3

如果存在多个下拉菜单，这个方法可以工作，不需要使用任何ID。

<div class="d-flex  gap-3 col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown button
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown button <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
    </div>
  </div>
    <script>
        $(".dropdown-menu li a").click(function () {
            var selText = $(this).text();
            $(this).parents('.dropdown').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
        });
    </script>

- Sivakumar D

Answer 4

你可以通过这个简单的例子来学习。

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

请添加以下脚本：

$(function(){

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

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

你也可以尝试在http://jsbin.com/owuyix/4/edit中使用这个示例。

- Abilash Nadesan

---

已经尝试过了，但它与我的布局不兼容。我没有按钮，也无法添加它。 - onedevteam.com

Answer 5

我遇到了同样的问题，这是我找到的解决方案。

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

- user9026942

Answer 6

我找到了一个使用“onclick”的解决方案。

onclick="$('#your-main-button-name').html('The text you want to show');"

希望能有所帮助！:)

- Mourad