<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <h2>Dropdown as Select</h2> <div class="btn-group"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select a Country <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Item I</a></li> <li><a href="#">Item II</a></li> <li><a href="#">Item III</a></li> <li><a href="#">Item IV</a></li> <li><a href="#">Item V</a></li> <li class="divider"></li> <li><a href="#">Other</a></li> </ul> </div> </div>

$(".dropdown-menu li a").click(function(){ var selText = $(this).text(); $(this).parents('.form-group').find('button[data-toggle="dropdown"]').html(selText+' <span class="caret"></span>'); });