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.