Como exibir o item selecionado no título suspenso do botão Bootstrap

Estou usando o componente suspenso de inicialização no meu aplicativo como este:

<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>

Gostaria de exibir o item selecionado como o rótulo btn. Em outras palavras, substitua "Por favor, selecione na lista" pelo item da lista que foi selecionado ("Item I", "Item II", "Item III").

Pelo que entendi, o seu problema é que você deseja alterar o texto do botão com o texto vinculado ao clicar. Caso contrário, tente 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());

   });

});

Conforme seu comentário:

isso não funciona para mim quando tenho um item de lista <li>preenchido por meio de uma chamada ajax.

portanto, você deve delegar o evento ao pai estático mais próximo com o .on()método jQuery:

 $(function(){

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

});

Aqui o evento é delegado ao pai estático $(".dropdown-menu"), embora você também possa delegar o evento $(document)porque ele está sempre disponível.

Atualizado para o Bootstrap 3.3.4:

Isso permitirá que você tenha diferentes valores de texto e dados de exibição para cada elemento. Também persistirá o cursor na seleção.

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>

Exemplo de JS Fiddle

Consegui melhorar um pouco a resposta de Jai para o trabalho, caso você tenha mais de um botão suspenso com uma apresentação muito boa que funciona com o bootstrap 3:

Código para o botão

<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>

Snippet do 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());

});

Eu também adicionei uma margem de 5px à classe "seleção".

Esta única função jQuery fará tudo o que você precisa.

$( 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>');
        });
    });
});

Aqui está a minha versão disso, que espero poupar um pouco do seu tempo :)

jQuery PART:

$(".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 em mais de uma lista suspensa na mesma página. Além disso, adicionei circunflexo no item selecionado:

    $(".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());
    });

você precisa usar add class openin <div class="btn-group open">

e em liadiçãoclass="active"

Modificado ainda mais com base na resposta de @Kyle, como $ .text () retorna uma string exata, para que a tag de cursor seja impressa literalmente, e não como uma marcação, apenas no caso de alguém desejar manter o cursor intacto no menu suspenso.

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

Corrigi o script para vários menus suspensos na 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());
   });
});

Outra maneira simples (Bootstrap 4) de trabalhar com vários menus suspensos

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

Parece ser uma questão longa. Tudo o que queremos é apenas implementar uma tag de seleção no grupo de entrada. Mas o bootstrap não faria isso: https://github.com/twbs/bootstrap/issues/10486

o truque é apenas adicionar a classe "btn-group" ao div principal

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>');       
});

Depois de clicar no item, adicione algum atributo de dados como data-selected-item = 'true' e obtenha-o novamente.

Tente adicionar o item selecionado como data = true para o elemento li em que você clicou e, em seguida,

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

Antes de adicionar este atributo, basta remover o item selecionado de dados existente na lista. Espero que isso possa ajudá-lo

Para obter informações sobre o uso de atributos de dados no jQuery, consulte Dados do jQuery

Eu tive que colocar alguns javascripts exibidos acima dentro do código "document.ready". Caso contrário, eles não funcionaram. Provavelmente óbvio para muitos, mas não para mim. Portanto, se você estiver testando, observe essa opção.

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

Por exemplo:

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>

Eu uso o novo elemento BtnCaption para alterar apenas o texto do botão.

Colar em $(document).ready(function () {} texto a seguir

JavaScript:

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

:not(.disabled) não permita usar os itens de menu desativados