BS4 изменить значение раскрывающейся кнопки в соответствии с выбранной величиной

Question

Я пытаюсь, чтобы в раскрывающемся меню BS4 отображалось выбранное пользователем значение в раскрывающейся кнопке, т. Е. .dropdown-toggle

Этот вопрос был задан ранее здесь , но он немного устарел, поскольку использует BS3 Framework. Также не предусмотрен метод, в котором раскрывающийся список используется несколько раз.

My jsFiddle , здесь показаны проблемы, с которыми я в данный момент сталкиваюсь, как я адаптировал решение, связанное ранее.

BS4 Dropdown

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

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

Answer 2

После долгих испытаний я наконец достиг своей цели, используя следующее. Спасибо @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.