BS4 更改下拉按钮值以匹配所选下拉值？答案

【问题标题】：BS4 changing dropdown button value to match selected dropdown value?BS4 更改下拉按钮值以匹配所选下拉值？
【发布时间】：2021-02-16 19:30:26
【问题描述】：

我正在尝试让我的 BS4 下拉菜单显示用户在下拉切换按钮中选择的值，即.dropdown-toggle

这个问题之前已经问过here，但它有点过时了，因为它使用了 BS3 框架。它也没有提供多次使用下拉菜单的方法。

我的jsFiddle 在这里显示了我目前面临的问题，以及我如何调整之前链接的解决方案。

BS4 下拉菜单

<div class="btn-group">
  <button class="btn btn-sm dropdown-toggle px-0 mr-3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Sort by:
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Most Recent</a>
    <a class="dropdown-item" href="#">Popular</a>
    <a class="dropdown-item" href="#">Trending</a>
    <a class="dropdown-item" href="#">Acending</a>
    <a class="dropdown-item" href="#">Decending</a>
  </div>
</div>

我的 Jquery 尝试

// Find all drop downs and check their classes.
$(".dropdown-menu a").click(function() {

  // Find the dropdown toggle and append the text.
  $(".dropdown-toggle:first-child").append($(this).text());

});

问题：

如何在页面上没有所有下拉菜单的情况下达到我想要的结果受到影响？此外，我还需要删除附加的文本选择新值时。

我追求的结果； button value = 'Sort by: Most Recent'

【问题讨论】：

标签： jquery html bootstrap-4

【解决方案1】：

试试这个

$(".dropdown-menu a").click(function() {
   //this one is add and remove active class
   $(this).closest('.btn-group').find(".dropdown-menu a").removeClass('active');
   $(this).addClass('active');
    //this one is for append text in button tag
    $(this).closest('.btn-group').find('button').append($(this).text())
   });
});

【讨论】：

感谢您的指导，最后我做了一些调整。 +1
这对我来说意义重大:)

【解决方案2】：

经过大量测试，我终于使用以下方法达到了我的目标。感谢@Vinee 提供指导。

您可以通过以下方式查看一个工作示例； JSFiddle here;

我已经对我的代码进行了注释，希望它能让任何了解它的人更容易理解。

这对我有用...

$("document").ready(function() {

  // The timeout is to wait the click, so the elements can render correctly.
  setTimeout(function() {

    // Trigger the active class on DOM Ready...
    $('.btn-group').find('.active').trigger('click');

  }, 10);

});


// On dropdown child click do...
$(".dropdown-menu a").click(function() {

  // Remove any existing 'active' classes...
  $(this).closest('.btn-group').find(".dropdown-menu a").removeClass('active');

  // Add 'active' class to clicked element...
  $(this).addClass('active');

  // Remove any previous '<span class="appended">'
  // This is needed so the values reset when a new option is clicked...
  $(this).closest('.btn-group').find('.appended').remove();

  // Add a new '<span class="appended">' element -
  // and fill it with the clicked elements text
  $(this).closest('.btn-group').find('button').append('<span class="appended">' + $(this).text() + '</span>');

});

希望这可以帮助那里的人。这对我来说很麻烦...... xD

问候，-B。

【讨论】：

【解决方案3】：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<title>Lorem Ipsum Dolor </title>

【讨论】：

虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并最终将这些知识应用到他们自己的代码中。解释代码时，您也可能会得到用户的积极反馈/赞成。