<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3>Select tag using dropdown menu bootstrap style<h3> <div class="btn-group"><a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an option <span class="caret"></span></a> <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> </ul> </div> </div>

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