JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<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">
  Menú (haz clic aquí)
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-opcion="alfa">Alfa</a></li>
    <li><a href="#" data-opcion="beta">Beta</a></li>
    <li><a href="#" data-opcion="gama">Gama</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#" data-opcion="delta">Delta</a></li>
  </ul>
</div>
<hr>
<p>variable elegida: <span class="elegida">ninguna</span><br><br>
<input type="text" id="elegida">
<hr>
Puedes enviarme por una variable GET, en un link o en un input de un formulario
</p>

JavaScript

$(function(){
	var menu = $("ul.dropdown-menu");
  var opciones = menu.find("li a");
  
  opciones.on("click", function(e){
  	var elegido = $(this).data("opcion");
    
    
    //aqui jugar con la variable elegido
    $("#elegida").val(elegido);
    
    $(".elegida").text(elegido);
  })
});