Como mostrar en el título del dropdown del Bootstrap la opción seleccionada

Hola,

En el dropdown del Bootstrap se mantiene siempre un mismo título, en mi caso Users, y me gustaría que saliera el nombre del usuario seleccionado.

Se que tengo que usar Jquery, pero al hacer click en una opción se me cambia totalmente el formato como si fuera texto plano, y no me deja volver a seleccionar otras opciones.

Mi código es el siguiente:

<div class="panel with-nav-tabs panel-warning">
        <div class="panel-heading">
             <ul class="nav nav-tabs">           
                 <li class="dropdown">
                    <a href="#" data-toggle="dropdown">Users<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                       {% for user in users %}
                           <li><a href="#{{ user.ldapCn }}" data-toggle="tab">{{ user.ldapCn }}</a></li>                        
                       {% endfor %} 
                    </ul>
                </li>               
            </ul>
        </div>
    <div class="panel-body">
            <div class="tab-content">  
                {% for user in users %}                     
                    <div class="tab-pane fade" id="{{ user.ldapCn }}">  
                      {# información de usuario #}                                               
                    </div>
               {% endfor %}
            </div>
        </div>
    </div>
</div>
 
<script>
        $(function(){             
              $(".dropdown-menu li a").click(function(){                
                $(".dropdown:first-child").text($(this).text());
                 $(".dropdown:first-child").val($(this).text());
 
              });
 
        });
</script>

Muchas gracias de antemano.

Respuestas

#1

Hola el problema es que si haces:

alert($(".dropdown:first-child").text());

te podrás percatar de que la respuesta no es la deseada(Users en primera instancia).

Se me ocurre que seas más precisa con tu selector css, algo como esto:

<ul class="nav nav-tabs">
    <li class="dropdown">
        <a href="#" data-toggle="dropdown">
          <span class="user_selected">Users</span>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
            {% for user in users %}
               <li><a href="#{{ user.ldapCn }}" data-toggle="tab">{{ user.ldapCn }}</a></li>                        
            {% endfor %} 
        </ul>
    </li>
</ul>

y ahora puedes con jQuery hacer:

<script>
        $(function () {
            $(".dropdown-menu li a").click(function () {
                var text_selected = $(this).text();
                $(".dropdown .user_selected").text(text_selected);
            });
 
        });
</script>

Espero te sirva. Saludos.

@RoberRielo

12 septiembre 2016, 20:22

#2

Muchas gracias @RoberRielo, me sirvió.

Un saludo.

@helenmelenen

13 septiembre 2016, 10:20