<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"> <div class="row"> <div class="dropdown col-lg-6 "> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" ><span id="selectItems">Dropdown Example</span> <span class="caret"></span></button> <ul class="dropdown-menu "> <li><a href="#" onclick="selectItem(this)">HTML</a></li> <li><a href="#" onclick="selectItem(this)">CSS</a></li> <li><a href="#" onclick="selectItem(this)">JavaScript</a></li> </ul> </div> <div class="dropup "> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" ><span id="selectItemsdropup">Dropdown Example</span> <span class="caret"></span></button> <ul class="dropdown-menu "> <li><a href="#" onclick="selectItemdropUp(this)">HTML</a></li> <li><a href="#" onclick="selectItemdropUp(this)">CSS</a></li> <li><a href="#" onclick="selectItemdropUp(this)">JavaScript</a></li> </ul> </div> </div> </div>

function selectItem(obj){ document.getElementById("selectItems").innerText=obj.innerText; } function selectItemdropUp(obj){ alert(""); document.getElementById("selectItemsdropup").innerText=obj.innerText; }