Display Selected Item In Bootstrap Button Dropdown Title / Place Holder Text

This question has been asked a few times on Stackoverflow - however I still cant get to the bottom of it... plus my query is throwing more dropdowns into play. So I have two dropdo

Solution 1:

You can set the selected dropdown text like this..

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
});

And then handle the search button click to get the selected values:

$("#btnSearch").click(function(){
    alert($('.btn-select').text()+", "+$('.btn-select2').text());
});

Working demo: http://www.bootply.com/63926

Solution 2:

Bootstrap 4 version:

$(".dropdown-item").click(function(){
    var selText = $(this).text();
    $(this).parents('.dropdown').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
});