Come visualizzare l'elemento selezionato nel titolo a discesa del pulsante Bootstrap

Sto usando il componente Dropdown bootstrap nella mia applicazione in questo modo:

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

Vorrei visualizzare l'elemento selezionato come etichetta btn. In altre parole, sostituire "Seleziona dall'elenco" con l'elemento dell'elenco che è stato selezionato ("Articolo I", "Articolo II", "Articolo III").

Per quanto ho capito il tuo problema è che vuoi cambiare il testo del pulsante con il testo collegato facendo clic, in tal caso puoi provare questo: 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());

   });

});

Secondo il tuo commento:

questo non funziona per me quando ho voci di elenco <li>popolate attraverso una chiamata Ajax.

quindi devi delegare l'evento al genitore statico più vicino con il .on()metodo jQuery:

 $(function(){

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

});

Qui l'evento è delegato al padre statico $(".dropdown-menu"), anche se è possibile delegare l'evento $(document)anche perché è sempre disponibile.

Aggiornato per Bootstrap 3.3.4:

Ciò ti consentirà di avere testo di visualizzazione e valori dei dati diversi per ciascun elemento. Persisterà anche il cursore sulla selezione.

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>

Esempio di violino JS

Sono stato in grado di migliorare leggermente la risposta di Jai al lavoro nel caso in cui tu abbia più di un menu a discesa con una presentazione abbastanza buona che funziona con bootstrap 3:

Codice per il pulsante

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

});

Ho anche aggiunto un margine 5px-right alla classe "selection".

Questa singola funzione jQuery farà tutto il necessario.

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

Ecco la mia versione di questo che spero possa farti risparmiare un po 'del tuo tempo :)

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>  

Questo funziona su più di un menu a discesa nella stessa pagina. Inoltre, ho aggiunto il cursore sull'elemento selezionato:

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

devi usare aggiungi classe openin <div class="btn-group open">

e in liaggiuntaclass="active"

Ulteriormente modificato in base alla risposta di @Kyle come $ .text () restituisce una stringa esatta, quindi il tag del cursore viene stampato letteralmente, piuttosto che come un markup, nel caso in cui qualcuno desideri mantenere intatto il cursore nel menu a discesa.

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

Ho corretto lo script per più menu a discesa sulla pagina

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

Un altro modo semplice (Bootstrap 4) per lavorare con più menu a discesa

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

Sembra essere un problema lungo. Tutto ciò che vogliamo è semplicemente implementare un tag select nel gruppo di input. Ma il bootstrap non lo farebbe: https://github.com/twbs/bootstrap/issues/10486

il trucco sta semplicemente aggiungendo la classe "btn-group" al div parent

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

Dopo aver fatto clic sull'elemento aggiungi alcuni attributi di dati come data-selected-item = 'true' e riavvialo.

Prova ad aggiungere data-selected-item = 'true' per l' elemento li su cui hai fatto clic, quindi

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

Prima di aggiungere questo attributo è sufficiente rimuovere l'elemento esistente selezionato dai dati nell'elenco. Spero che questo ti possa aiutare

Per informazioni sull'uso degli attributi di dati in jQuery, consultare i dati jQuery

Ho dovuto inserire alcuni dei javascript visualizzati sopra nel codice "document.ready". Altrimenti non funzionavano. Probabilmente ovvio per molti, ma non per me. Quindi, se stai testando, guarda quell'opzione.

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

Per esempio:

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 il nuovo elemento BtnCaption per cambiare solo il testo del pulsante.

Incolla dentro $(document).ready(function () {} seguente testo

JavaScript:

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

:not(.disabled) non consentire l'uso delle voci di menu disabilitate