Cómo Mostrar el Elemento Seleccionado en Bootstrap Botón Desplegable Título

Estoy usando bootstrap componente Desplegable en mi aplicación como esta:

<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 el btn etiqueta. En otras palabras, sustituir «por Favor, Seleccione De la Lista» con el elemento de la lista que ha sido seleccionado (Elemento»I», «II», «III»).

InformationsquelleAutor Suffii | 2012-11-18

14 Kommentare

  1. 151

    Tan lejos como he entendido tu problema es que quieres cambiar el texto del botón con el clic de texto vinculados, si es así puedes probar esto: 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());
    
       });
    
    });

    Por tu comentario:

    este no me funciona cuando tengo listas elemento <li> poblado a través de la llamada ajax.

    así que tienes que delegar el evento más cercano estática de los padres con .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í evento se delega a la estática de los padres $(".dropdown-menu"), aunque puede delegar el evento a la $(document) demasiado, porque siempre está disponible.

    • Hola Jai traté de ur enlace de muestra, pero no es trabajo allí, además es necesario tomar el valor seleccionado como bien publicar en la base de datos más adelante
    • Puede usted por favor aclarar «tome el valor seleccionado como bien publicar en la base de datos», que valor?
    • he actualizado la respuesta si el actual artículo pulsado el valor que se desee publicar en la db.
    • hola Jai lo siento por la respuesta tardía gracias por ur solución.el único problema que tengo es como puedo ponerlo .ready() de la función? la solución funciona perfectamente, pero cuando me combinar en el documento.listo() deja de funcionar!Puede usted también quisiera saber cómo fue que empezaste con el :primer hijo?! no es » btn clase de un botón ? entonces, ¿cómo podemos utilizar el primer hijo con ella? Yo también te agradecería si me dejas saber como puedo capturar el valor seleccionado en una variable a incluir en la base de datos? Gracias de nuevo por tu ayuda
    • Hola Behseini, esta «$(function(){});» es equivalente a «$(document).ready(function() {});» usted puede encontrar más información aquí:api.jquery.com/ready
    • Hola Jai, gracias por la solución.. este no me funciona cuando tengo listas elemento <li> rellena a través de la llamada ajax. Pero, funciona bien para la estática <li> .. alguna idea? Puedo hacer otra pregunta con más detalles.
    • Mi relacionada con quetsion aquí stackoverflow.com/questions/15979359/…
    • Esta es la causa de desaparición de icono.
    • eso es porque el código se elimina el interior lapso que se utiliza para mantener el icono de flecha abajo. Esto funciona (tenga en cuenta que mi código está en un controlador de eventos con objeto de evento e): $('.btn:first-child').html($(e.target).text()+' <span class="caret"></span>') he encontrado esto para ser útiles: benknowscode.com/2013/12/…
    • ¿No parece un poco cursi que ESTA es la solución?
    • No hay ninguna opción en este ejemplo, a pesar de que la pregunta dice claramente que se debe implementar un bootstrap desplegable.

  2. 138

    Actualizado para el Bootstrap 3.3.4:

    Esto le permitirá tener diferentes de visualización de texto y datos de valor para cada elemento. También persiste el símbolo de intercalació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 Violín Ejemplo

    • En este trabajo como un reemplazo para seleccionar la opción en un formulario?
    • Funciona muy bien y he añadido como de abajo para ocultar el desplegable de elementos después de la selección «$(this).los padres(«.btn-group»).find(‘.la selección’).texto($(this).text()).end() .los niños( ‘.dropdown-toggle’ ).desplegable( ‘toggle’ );»
    • Actualización para el Bootstrap 3.3.4: los padres(«.entrada-grupo-btn») debe ser reemplazado con sus padres».menú desplegable»)
    • Esto debe ser aceptado respuesta después de que el cambio sugerido por @cincplug se agrega. Asimismo, si desea mantener el cursor hacia abajo en el texto del botón, usted necesitará utilizar .html en lugar de .texto y concatenar el lapso en $(this).text().
    • Yo deseo que yo había visto tu comentario antes de que me comentó sobre la aceptada respuesta – que están en el lugar.
    • Trabajó como un encanto para el envío de formularios después he añadido id="myselect" el botón propiedades.
    • que parece que no funciona en el móvil (Android + iOS)
    • Sugiero almacenar $(this).parents(".dropdown").find('.btn') en una variable, en lugar de tener jquery recorrer el DOM dos veces.

  3. 28

    Yo era capaz de mejorar un poco la Jai, la respuesta a trabajar en el caso de tener más de un botón desplegable con una muy buena presentación que trabaja 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>

    JQuery Fragmento De

    $(".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 he añadido un 5px margen derecha a la «selección» de la clase.

  4. 7

    Este uno trabaja en más de una lista desplegable en la misma página.
    Además, he añadido cursor sobre 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());
        });
    • Me sale «no detectada ReferenceError: $xx no está definido» en el modo estricto
    • Ivan hizo a encontrar lo que funciona en modo estricto?
    • Esto funciona muy bien para varios bootstrap desplegable en la misma página. Gracias!
  5. 7

    Esta única función jQuery va a hacer todo lo que usted 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>');
            });
        });
    });
    • Gracias ! esta respuesta me salva después de perder mi 10 minutos de lectura todas las otras soluciones.
  6. 6

    Aquí está mi versión de este que espero que puede ahorrar un poco de tu tiempo 🙂

    Cómo Mostrar el Elemento Seleccionado en Bootstrap Botón Desplegable Título
    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 DE 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>  
    • ¿Cómo hacer que el texto en la lista desplegable cambiar a lo que el usuario acaba de seleccionar? Dicen que selecciona la opción 1, luego hacer clic en desactivar. El texto de la opción uno debe estar en la lista desplegable en este punto, ¿cómo hacer eso?
    • Cuando un usuario selecciona una opción » var selText = $(this).los niños(«h4″).html() » cambiar el texto.
  7. 4

    Modificado basado en la respuesta de @Kyle como
    $.texto() devuelve la cadena exacta, por lo que el símbolo de intercalación de la etiqueta se imprime literalmente, y no como una marca, sólo en caso de que a alguien le gusta mantener el símbolo de intercalación intacta en el menú desplegable.

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

    He corregido secuencia de comandos 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());
       });
    });
  9. 1

    Parece ser mucho problema. Todo lo que quiero es simplemente aplicar una etiqueta < select > en el grupo de entrada. Pero el bootstrap no hacerlo: https://github.com/twbs/bootstrap/issues/10486

    el truco es sólo la adición de «btn-group» de la clase del 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>');       
    });
  10. 1

    Otra manera simple (Bootstrap 4) trabajar con varias listas desplegables

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

    Una vez que usted haga clic en el elemento agregar algunos datos de atributo como datos seleccionados-item=’true’ y obtener de nuevo.

    Intentar agregar datos seleccionados-item=’true’ para elemento de li que usted hace clic en, a continuación,

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

    Antes de añadir este atributo simplemente eliminar los datos existentes-seleccionado-en el elemento de la lista. Espero que esto le ayudaría a

    Para obtener información acerca de los datos de atributo de uso en jQuery, consulte jQuery datos

    • Hola Murali, Gracias por ur comentario, he intentado esto, pero todavía no conseguir cualquier cosa var test = $('ul.dropdown-menu li').data('selected-item').find('a').text(); $("#nbtn").html(test); puede usted por favor hágamelo saber lo que estoy haciendo mal?
    • Por favor, consulte la actualización de la respuesta. He cambiado el código de a $(‘ul.dropdown-menu li[datos seleccionados-item] a’).texto(); Try este
  12. 0

    Tenía que poner algo de la muestra javascripts arriba en el interior del documento.listos» de código. De lo contrario no funciona. Probablemente obvio para muchos, pero no para mí. Así que si tienes pruebas de mirar esa opción.

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

    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>

    Yo uso nuevo elemento BtnCaption para cambiar sólo botón del texto.

    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 permitir el uso de los elementos de menú deshabilitado

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea