JSFiddle - React, Tailwind, and code Playground
by Carlos Medina
HTML
<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
<ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">Generic</li>
<li><a id="num">Number</a></li>
<li><a id="float">Float</a></li>
<li><a>Boolean</a></li>
<li><a>Character</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Geographical</li>
<li><a>Zip Code</a></li>
<li><a>City</a></li>
<li><a>Region</a></li>
<li><a>Countries</a></li>
<li><a>Latitude/Longitude</a></li>
</ul>
<div>
<br>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
<ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu2" >
<li class="dropdown-header">Generic</li>
<li><a id="num">Number</a></li>
<li><a id="float">Float</a></li>
<li><a>Boolean</a></li>
<li><a>Character</a></li>
<li...
JavaScript
$(document).ready(function(){
$(".dropdown-menu li a").on("click",function(){
$($(this).closest(".dropdown").find("button")[0]).text($(this).text());
});
})