0

Tengo un <select> con varios option values:

<select name="fld_4447635" value="" data-field="fld_4447635" class="form-control" id="fld_4447635_1" aria-labelledby="fld_4447635Label">
  <option value="" disabled="" selected="">Locations</option>
  <option value="Madrid">Madrid</option>
  <option>Paris</option>
</selected>

Y al lado tengo una imagen con src. Me gustaría que según el valor que coja de option con jQuery, la imagen que cambie su src.

He intentado esto pero no funciona:

jQuery(document).ready(function( $ ){

     $('#madrid').click(function(){
        $('.responsive-image-header').replaceWith('<img id="cambio" src="http://localhost/evualahopruebas/wp-content/uploads/2020/03/room-3.jpg" alt="imagen cambiada" width="500" height="400">');
     });

});

Si me pudierais ayudar os lo agradecería.

2

1 respuesta 1

2

Como valor de las opciones necesitas utilizar el nombre de la imagen. Al cambiar el elemento seleccionado recuperas el valor y lo utilizas para construir el valor del atributo src de la imagen.

elSelect.addEventListener("change",()=>{
  laImagen.setAttribute("src","https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/" + elSelect.selectedOptions[0].value + ".jpg")
})
<img id="laImagen" width="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" />

<select id="elSelect">
  <option value="">Seleccione algo</option>
  <option value="butterfly">Madrid</option>
  <option value="enfeinada250">Paris</option>
</select>

Este ejemplo es muy básico. En practica quieres primero verificar si las imágenes están ya cargadas antes de empezar a cambiarlas.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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