JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" style="margin: 100px;">
  <div class="dropdown">
    <button class="btn dropdown-toggle btn-info" type="button" id="menu" data-toggle="dropdown">
      Option 1<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
      <li><a href="#">Option 4</a></li>
      <li><a href="#">Option 5</a></li>
    </ul>
  </div>
</div>

JavaScript

$(document.body).on('click', '.dropdown-menu li a', function(e) {
  var x = $(this).text();
  $("#menu").text(x);
});

$('.dropdown-toggle').dropdown();