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

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

Vorrei visualizzare l’elemento selezionato come etichetta btn. In altre parole, sostituire “Selezionare dall’elenco” con l’elemento della lista 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 cliccato, in questo 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 vostro commento:

questo non funziona per me quando ho una voce di elenco

  • popolata tramite una chiamata ajax.

    quindi devi debind l’evento al genitore statico più vicino con .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 a statico padre $(".dropdown-menu") , sebbene sia ansible debind l’evento a $(document) anche perché è sempre disponibile.

    Aggiornato per Bootstrap 3.3.4:

    Ciò ti consentirà di avere un testo di visualizzazione e un valore di dati diversi per ciascun elemento. Rimarrà anche il caret sulla selezione.

    JS:

     $(".dropdown-menu li a").click(function(){ $(this).parents(".dropdown").find('.btn').html($(this).text() + ' '); $(this).parents(".dropdown").find('.btn').val($(this).data('value')); }); 

    HTML:

      

    Esempio di JS Fiddle

    Sono stato in grado di migliorare leggermente la risposta di Jai per lavorare nel caso in cui tu avessi più di un pulsante a discesa con una presentazione abbastanza buona che funziona con bootstrap 3:

    Codice per The Button

     

    JQuery Snippet

     $(".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 di 5px alla class “selection”.

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

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

    Ecco la mia versione di questo che spero possa salvare un po ‘del tuo tempo 🙂

    inserisci la descrizione dell'immagine qui 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:

      

    devi usare la class add open in

    e in li aggiungi class="active"

    Ulteriormente modificato in base alla risposta di @Kyle come $ .text () restituisce la stringa esatta, quindi il tag del segno di spunta viene stampato letteralmente, anziché come markup, nel caso in cui qualcuno volesse mantenere intatto il segno di spunta nel menu a discesa.

     $(".dropdown-menu li").click(function(){ $(this).parents(".btn-group").find('.btn').html( $(this).text()+" " ); }); 

    Questa singola funzione jQuery farà tutto ciò di cui hai bisogno.

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

    Ho corretto lo script per più elenchi 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()); }); }); 

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

    il trucco è solo aggiungere la class “btn-group” al div genitore

    html:

     

    js:

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

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

    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 selezionato per i dati esistenti nell’elenco. Spero che questo ti possa aiutare

    Per informazioni sull’utilizzo degli attributi dei dati in jQuery, consultare i dati di jQuery

    Per esempio:

    HTML:

      

    Io uso il nuovo elemento BtnCaption per modificare solo il testo del pulsante.

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

    JavaScript:

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

    : not (.disabled) non consente di utilizzare le voci di menu disabilitate

    Ho dovuto inserire alcuni javascript sopra nel codice “document.ready”. Altrimenti non hanno funzionato. Probabilmente ovvio per molti, ma non per me. Quindi se stai provando guarda questa opzione.