Simple snippet of a dropdown menu which acts as a radio button: its label gets updated with the selected value

radioDropdownMenu.html

  <!-- show all/online/offline dropdown -->
  <div class="btn-group btn-right">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Show All <span class="caret"></span>
        </button>
    <ul class="dropdown-menu">
      <li><a href="#">Show All</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">Offline</a></li>
    </ul>
  </div>
  <!-- END: show all/online/offline dropdown -->

radioDropdownMenu.js

$(document).ready(function() {

  // ...
  
  // on filter channel status change
  $('.dropdown-menu li a').click(function (e) {
      var newHeading = $(this).text();
      var $heading = $('.dropdown-toggle');
      var $caret = $('.caret', $heading);
      $heading.html(newHeading + ' ').append($caret);
      filterChannelsByStatus(newHeading);
  });

});