Bootstrap Dropdown Button names change when clicked

Question

I'm using dropdown buttons (4 buttons) to filter my content in my project, and i want that the button names change to the selected, so the user will not forget where he/she is. See figure.

How can this be possible?

Thx in advance, and here is the pen.

Answer 1

You can use jQuery to update the dropdown button text..

$(".dropdown-menu li a").click(function(){
  $(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
});

Demo: https://codeply.com/p/MjyR2AaLqn