jQuery – Cambiar destino de un enlace
Veremos un ejemplo en jquery para cambiar destino de un enlace. En el código veremos cómo cambiar el atributo href de un enlace para que cambie según lo seleccionado en un desplegable.
Veamos el código en acción:
See the Pen jQuery – Modificar atributo href de enlace by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Tenemos un seleccionable que como opciones están los destinos posibles.
jQuery se encarga de capturar el evento del seleccionable y asignar su valor al atributo href del enlace.
Aquí el código HTML5 con los elementos:
<div class="container">
<div class="row p-3">
<div class="col-3">
<select class="form-control" id="select-destino" class="">
<option value="https://blog.trescomatres.com">Blog trescomatres</a>
<option value="https://www.google.es">Google</a>
<option value="https://codepen.io">CodePen</a>
</select>
</div>
<div class="col-2">
<a id="btn-saltar" href="https://blog.trescomatres.com" target="_blank" class="btn btn-success">Clica para ir a una web</a>
</div>
</div>
</div>Aquí el código jQuery:
// Se ejecuta cuando el desplegable cambie de valor
$("#select-destino").change(function(event){
// Capturamos el valor seleccionado del desplegable
var destino = $("#select-destino").find(':selected').val();
// Ahora cambiamos el atributo del enlace
$("#btn-saltar").attr("href", destino);
});Por un lado capturamos el valor seleccionado en el desplegable, y una vez tenemos es valor (que es un enlace), cambiamos el atributo href del enlace en cuestión. De esa manera, podemos hacer que un mismo enlace pueda ir hacia diferentes direcciones, según lo que el usuario escoja en el desplegable.
Espero que os sea de utilidad. Fijaos sobretodo en los ID de los elementos que son los utilizados en el código jquery para trabajar con ellos (captura eventos y asignación de valores).
Si con este artículo, jQuery – Cambiar destino de un enlace, no tenéis suficiente, podéis encontrar más información en los siguientes enlaces:
Más información