0

Titulo. ¿Como seria posible para que cuando inicie la siguiente lista desplegable comienze con el value que le indique?, y no con el primer elemento de la lista. Aun no comprendo de todo este control de boostrap.

$(function(){
$(".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'));
   //trigger event
});
  //trigger event
  $('.dropdown-menu li a').first().trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="dropdown btn-group mb-2">
<button type="button" id="event-estado" class="btn btn-light dropdown-toggle" 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="javascript:void(0);" class="dropdown-item" data-value="1">Confirmado</a></li>
      <li><a href="javascript:void(0);" class="dropdown-item" data-value="2">Caducado</a></li>
      <li><a href="javascript:void(0);" class="dropdown-item" data-value="3">Cancelado</a></li>
   </ul>
</div>

1 respuesta 1

1

No lo he usado, pero por lo que veo, toda la magia esta dentro del bloque:

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

    //trigger event
    $('.dropdown-menu li a').first().trigger('click');
});

Al hacer un clic cambia la opción seleccionada, entonces deberíamos poder usar esto como base para cambiar la opción al inicio. Además, la línea: $('.dropdown-menu li a').first().trigger('click'); esta seleccionando el primer elemento de la lista al inicio, puedes comentarla y veras que se muestra la opción: Dropdown. Primero refactorizo el bloque:

$(function(){
    $(".dropdown-menu li a").click(function(){
        const element = $(this).parents(".dropdown").find('.btn');
        element.html(
            $(this).text() + ' <span class="caret"></span>'
        );
        element.val(
            $(this).data('value')
        );
    });

    //trigger event
    $('.dropdown-menu li a').first().trigger('click');
});

Con la línea const element = $(this).parents(".dropdown").find('.btn'); estas obteniendo el elemento, posteriormente creo que se le añade el html a mostrar y su valor. Los métodos .html() y .val() parece que han sido sobreescritos, en jQuery no aceptan parámentros (https://api.jquery.com/html/ https://api.jquery.com/val/).

Cómo ya sabemos que línea que selecciona el elemento, una opción sería añadir IDs a las opciones y usar el de la opción que quieres por defecto en este punto. Así por ejemplo, quiero seleccionar "Caducado":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <script type="text/javascript">
        $(function(){
            $(".dropdown-menu li a").click(function(){
                console.log(this); // HACK:
                const element = $(this).parents(".dropdown").find('.btn');
                element.html(
                    $(this).text() + ' <span class="caret"></span>'
                );
                element.val(
                    $(this).data('value')
                );
            });

            //trigger event
            //$('.dropdown-menu li a').first().trigger('click');
            $('#expired').trigger('click');
        });
    </script>
</head>
<body>
    <div class="dropdown btn-group mb-2">
        <button type="button" id="event-estado" class="btn btn-light dropdown-toggle" 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="javascript:void(0);" class="dropdown-item" data-value="1">Confirmado</a>
            </li>
            <li>
                <a id="expired" href="javascript:void(0);" class="dropdown-item" data-value="2">Caducado</a>
            </li>
            <li>
                <a href="javascript:void(0);" class="dropdown-item" data-value="3">Cancelado</a>
            </li>
       </ul>
    </div>
</body>
</html>


NOTA: he dejado un console.log(), este lo puse para saber el elemento concreto al que debía añadir la ID.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.