Dropdown Example

by Jelgab

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>
  </h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
      <span id = "TituloDropDown">
        Escoja un Estado
      </span>
      
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="javaScript:void(0);" onclick="actualizarTituloDropdown( this )">HTML</a></li>
      <li><a href="javaScript:void(0);" onclick="actualizarTituloDropdown( this )">CSS</a></li>
      <li><a href="javaScript:void(0);" onclick="actualizarTituloDropdown( this )">JavaScript</a></li>
    </ul>
  </div>
</div>

JavaScript

function actualizarTituloDropdown( datoOpcion ){
  //console.log( $(datoOpcion).text() );
  $( "#TituloDropDown" ).text( $(datoOpcion).text() );
}