Cómo mostrar el elemento seleccionado en el título desplegable del botón Bootstrap

Estoy usando el componente de arranque de arranque en mi aplicación de esta manera:

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Item I</a></li>
       <li><a tabindex="-1" href="#">Item II</a></li>
       <li><a tabindex="-1" href="#">Item III</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1" href="#">Other</a></li>
    </ul>
</div>

Me gustaría mostrar el elemento seleccionado como la etiqueta btn. En otras palabras, reemplace "Seleccione de la lista" con el elemento de la lista que ha sido seleccionado ("Elemento I", "Elemento II", "Elemento III").

Según tengo entendido, su problema es que desea cambiar el texto del botón con el texto vinculado al hacer clic, si es así, puede probar este: http://jsbin.com/owuyix/4/edit

 $(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

Según su comentario:

esto no funciona para mí cuando tengo elementos de listas <li>rellenados a través de una llamada ajax.

por lo que debe delegar el evento al padre estático más cercano con el .on()método jQuery:

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

Aquí el evento se delega al padre estático $(".dropdown-menu"), aunque también puede delegar el evento $(document)porque siempre está disponible.

Actualizado para Bootstrap 3.3.4:

Esto le permitirá tener diferentes valores de texto y datos de visualización para cada elemento. También persistirá la preocupación en la selección.

JS:

$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

JS Fiddle Example

Pude mejorar ligeramente la respuesta de Jai al trabajo en el caso de que tengas más de un botón desplegable con una presentación bastante buena que funciona con bootstrap 3:

Código para el botón

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Option: <span class="selection">Option 1</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

Fragmento de JQuery

$(".dropdown-menu li a").click(function(){

  $(this).parents(".btn-group").find('.selection').text($(this).text());
  $(this).parents(".btn-group").find('.selection').val($(this).text());

});

También agregué un margen derecho de 5px a la clase "selección".

Esta única función jQuery hará todo lo que necesita.

$( document ).ready(function() {
    $('.dropdown').each(function (key, dropdown) {
        var $dropdown = $(dropdown);
        $dropdown.find('.dropdown-menu a').on('click', function () {
            $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
        });
    });
});

Aquí está mi versión de esto que espero pueda ahorrarle algo de tiempo :)

PARTE jQuery:

$(".dropdown-menu").on('click', 'li a', function(){
  var selText = $(this).children("h4").html();


 $(this).parent('li').siblings().removeClass('active');
    $('#vl').val($(this).attr('data-value'));
  $(this).parents('.btn-group').find('.selection').html(selText);
  $(this).parents('li').addClass("active");
});

PARTE HTML:

<div class="container">
  <div class="btn-group">
    <a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span> 
      <span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>

     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span>  <span> Your Option 1</span> </h4></a>  </li>
       <li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span>  </h4></a>
      </li>
      <li class="divider"></li>
   <li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span>  </h4></a>
      </li>
    </ul>
  </div>
  <input type="text" id="vl" />
</div>  

Este funciona en más de un menú desplegable en la misma página. Además, agregué caret en el elemento seleccionado:

    $(".dropdown-menu").on('click', 'li a', function(){
        $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
        $(this).parent().parent().siblings(".btn:first-child").val($(this).text());
    });

necesitas usar add class openen <div class="btn-group open">

y en liagregarclass="active"

Modificado aún más en función de la respuesta de @Kyle ya que $ .text () devuelve una cadena exacta, por lo que la etiqueta de caret se imprime literalmente, en lugar de un marcado, en caso de que alguien quiera mantener el caret intacto en el menú desplegable.

$(".dropdown-menu li").click(function(){
  $(this).parents(".btn-group").find('.btn').html(
  $(this).text()+" <span class=\"caret\"></span>"
  );
});

He corregido el script para múltiples menús desplegables en la página

$(function(){
    $(".dropdown-menu li a").click(function(){
        var item = $(this);
        var id = item.parent().parent().attr("aria-labelledby");

        $("#"+id+":first-child").text($(this).text());
        $("#"+id+":first-child").val($(this).text());
   });
});

Otra forma simple (Bootstrap 4) de trabajar con múltiples menús desplegables

    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });

Parece ser un problema largo. Todo lo que queremos es implementar una etiqueta de selección en el grupo de entrada. Pero el bootstrap no lo haría: https://github.com/twbs/bootstrap/issues/10486

el truco es simplemente agregar la clase "btn-group" al div padre

html:

<div class="input-group">
  <div class="input-group-btn btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Product Name <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Search</button>
  </span>
</div>

js:

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

Una vez que haga clic en el elemento, agregue algunos atributos de datos como data-selected-item = 'true' y vuelva a obtenerlo.

Intente agregar data-selected-item = 'true' para el elemento li en el que hizo clic, luego

   $('ul.dropdown-menu li[data-selected-item] a').text();

Antes de agregar este atributo, simplemente elimine el elemento seleccionado de datos existente en la lista. Espero que esto te ayude

Para obtener información sobre el uso de atributos de datos en jQuery, consulte los datos de jQuery

Tuve que poner algunos de los javascripts mostrados arriba dentro del código "document.ready". De lo contrario, no funcionaron. Probablemente obvio para muchos, pero no para mí. Entonces, si estás probando, mira esa opción.

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>

Por ejemplo:

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
     <BtnCaption>Select item</BtnCaption>
     <span class="caret"></span>   
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li class="disabled"><a href="#">Option 3</a></li>   
  </ul> 
</div>

Uso el nuevo elemento BtnCaption para cambiar solo el texto del botón.

Pegar en $(document).ready(function () {}el siguiente texto

JavaScript:

    $(".dropdown-menu li:not(.disabled) a").click(function () {
        $(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
    });

:not(.disabled) no permita usar los elementos de menú deshabilitados