BS4更改下拉按钮值以匹配选定的下拉值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (8)

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

这个问题之前已经在这里被问过但是它使用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'

提问于
用户回答回答于

经过多次测试后,我终于使用以下内容达到目标。感谢@Vinee提供方向。

你可以查看一个有效的例子; JSFiddle 在这里 ;

我已经对我的代码进行了评论,希望它能让那些选择它的人更容易理解。

这对我有用......

$("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。

用户回答回答于

试试这个

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

扫码关注云+社区

领取腾讯云代金券