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);
});

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).

Información relacionada

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*