JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span class="btn-label"></span> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li class="active option" id="option1"><a href="#">Ололо</a></li>
    <li class="option" id="option2"><a href="#">Еще ололо</a></li>
    <li class="option" id="option3"><a href="#">Прям ололололо</a></li>
    <li class="divider"></li>
    <li class="option" id="option4"><a href="#">И последнее</a></li>
  </ul>
</div>

<div id="chosen"></div>

CSS

.btn.btn-default {
    width: 150px;
}

#chosen:before {
    content: "Выбран элемент: ";
}

#chosen {
    margin-top: 20px;
}

JavaScript

$(function(){
    var checked = function(){
        $("#chosen").text($(".dropdown-menu > li.active").attr("id"));
        $(".btn.btn-default > .btn-label").text($("li.active > a").text());
    }
    
    checked();
    
    $(".dropdown-menu > li.option").click(function(){
        $(".dropdown-menu > li.active").removeClass("active");
        $(this).addClass("active");
        checked();
    });
});