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

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

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 se ha seleccionado (“Artículo I”, “Artículo II”, “Artículo III”).

Por lo que entiendo, su problema es que desea cambiar el texto del botón con el texto vinculado haciendo 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 lista el elemento

  • rellenado a través de una llamada ajax.

    por lo tanto, debe delegar el evento al padre estático más cercano con el .on() 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 a $(".dropdown-menu") parent estático $(".dropdown-menu") , aunque también puede delegar el evento al $(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á el interés en la selección.

    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:

      

    Ejemplo JS Fiddle

    Pude mejorar ligeramente la respuesta de Jai para trabajar 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

     

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

    También agregué un margen de 5 píxeles a la derecha de la clase de “selección”.

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

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

    Aquí está mi versión de esto, que espero pueda ahorrar algo de tu tiempo 🙂

    enter image description here jQuery PARTE:

     $(".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:

      

    necesitas usar agregar clase open en

    y en li agrega class="active"

    Modificado posteriormente en función de la respuesta de @Kyle como $ .text () devuelve la cadena exacta, por lo que la etiqueta de intercalación se imprime literalmente, en lugar de como una marca, en caso de que alguien quiera mantener intacta la intercalación en el menú desplegable.

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

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

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

    He corregido el script para varias listas 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()); }); }); 

    Parece ser un problema largo. Todo lo que queremos es simplemente 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 principal

    html:

     

    js:

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

    Una vez que haga clic en el elemento, agregue algún atributo 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 existentes en la lista. Espero que esto te ayude

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

    Por ejemplo:

    HTML:

      

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

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

    : no (.disabled) no permite usar los elementos del menú desactivados

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