2

He generado dos listas, una dependiente de la otra (Comunidad : ciudad : imagen), y no consigo que se muestre una imagen en la última columna, y que en cada vector de imágenes, yo pueda mostrar una imagen una vez seleccionada la ciudad. Lo único que he conseguido es generar otro select donde muestra el mensaje de "aqui va una imagen de ...", pero quiero que en vez del select name=descripcion salga una imagen en un contenedor div id=descripcion.

Mis funciones son estas :

var provincias = new Array()
provincias[1] = ["Elige provincia", "Almería", "Cádiz", "Córdoba",
    "Granada", "Huelva", "Jaen", "Málaga", "Sevilla"]
		
var imagenes = new Array()
imagenes[1] = new Array()
imagenes[1][1] = ["Aqui se mostrara una imagen de almeria"]
imagenes[1][2] = ["Aqui se mostrara una imagen de cadiz"]
imagenes[1][3] = ["Aqui se mostrara una imagen de cordoba"]
imagenes[1][4] = ["Aqui se mostrara una imagen de granada"]
imagenes[1][5] = ["Aqui se mostrara una imagen de huelva"]
imagenes[1][6] = ["Aqui se mostrara una imagen de jaen"]
imagenes[1][7] = ["Aqui se mostrara una imagen de malaga"]
imagenes[1][8] = ["Aqui se mostrara una imagen de sevilla"]
	
	
function eligeprovincia(lista){
  var comseleccionada = lista.comunidades.selectedIndex
    lista.listaprovincias.length = provincias[comseleccionada].length
    for (i=0; i<lista.listaprovincias.length; i++){
      lista.listaprovincias.options[i].text = provincias[comseleccionada][i]
    }
}

function muestraimagen(lista){
  var comseleccionada = lista.comunidades.selectedIndex
  var laimagen = lista.listaprovincias.selectedIndex
    lista.descripcion.length = imagenes[comseleccionada][laimagen].length
    for (i=0; i<lista.descripcion.length; i++){
      lista.descripcion.options[i].text = imagenes[comseleccionada][laimagen][i]
    }
}
<form>
  <select name="comunidades" onchange="eligeprovincia(this.form)">
  <option selected>Elige comunidad</option>
  <option>Andalucia</option>

  </select>
  <select name="listaprovincias" onchange="muestraimagen(this.form)">
  <option></option>
  </select>
  <select name="descripcion">
  <option></option>
  </select>
</form> 

Lo necesito en javascript puro

3
  • Entonces ¿el último select (con id descripción) debería ser un div? Commented el 11 feb. 2020 a las 21:00
  • @PabloLozano si, debe ser un div, y se que tengo que modificar mi segunda funcion de muestraimagen()
    – ShowMaster
    Commented el 11 feb. 2020 a las 21:00
  • Lo que editaste no es correcto ni bien visto pues si alguna de las respuestas dadas te ayudo, entonces considera marcarla como aceptada y así queda evidencia que se resolvió el problema
    – user128299
    Commented el 11 feb. 2020 a las 23:37

2 respuestas 2

1

var provincias = new Array()
provincias[1] = ["Elige provincia", "Almería", "Cádiz", "Córdoba",
  "Granada", "Huelva", "Jaen", "Málaga", "Sevilla"
]
//objeto para almacenar ciudad/foto
var ciudades = {
  "Almería": "https://placeimg.com/640/480/animals",
  "Cádiz": "https://placeimg.com/640/480/nature",
  "Córdoba": "https://placeimg.com/640/480/people"
};


function eligeprovincia(lista) {
  var comseleccionada = lista.comunidades.selectedIndex
  lista.listaprovincias.length = provincias[comseleccionada].length
  for (i = 0; i < lista.listaprovincias.length; i++) {
    lista.listaprovincias.options[i].text = provincias[comseleccionada][i]
  }
}

function muestraimagen(lista) {
  //Obtenemos el valor del select(la ciudad)
  var nombreimagen = lista.listaprovincias.value;
  
  //buscamos en el objeto la foto segun la ciudad, si es null no mostramos imagen porque significara que no hay foto para la ciudad
  if (null == ciudades[nombreimagen]) {
      document.imagen.style.display = "none";
      return false;
  }
  document.imagen.style.display = "block";
  document.imagen.src = ciudades[nombreimagen];

}
<form>
  <select name="comunidades" onchange="eligeprovincia(this.form)">
    <option selected>Elige comunidad</option>
    <option>Andalucia</option>
  </select>
  <select name="listaprovincias" onchange="muestraimagen(this.form)">
    <option></option>
  </select>
  <div><img style="display:none" name="imagen" id="imagen" alt="Imagenes">
  </div>
</form>

No sé cual es el fin de esto:

var imagenes = new Array()
imagenes[1] = new Array()
imagenes[1][1] = ["Aqui se mostrara una imagen de almeria"]
imagenes[1][2] = ["Aqui se mostrara una imagen de cadiz"]
imagenes[1][3] = ["Aqui se mostrara una imagen de cordoba"]
imagenes[1][4] = ["Aqui se mostrara una imagen de granada"]
imagenes[1][5] = ["Aqui se mostrara una imagen de huelva"]
imagenes[1][6] = ["Aqui se mostrara una imagen de jaen"]
imagenes[1][7] = ["Aqui se mostrara una imagen de malaga"]
imagenes[1][8] = ["Aqui se mostrara una imagen de sevilla"]

Pero yo preferiría hacerlo así: Tendrías un objeto, de la siguiente forma:

var ciudades = {
  "Almería": "https://placeimg.com/640/480/animals",
  "Cádiz": "https://placeimg.com/640/480/nature",
  "Córdoba": "https://placeimg.com/640/480/people"
};

En ese objeto; cada key puedes guardas tantas ciudades como gustes, y consecutivo a eso puedes meter la foto de cada ciudad por así decirlo.

Y podrías usar cada key para armar el segundo select de ciudades

La idea principal es obtener el value(la imagen) para cada key(ciudad), entonces bastara leer el value del select(tendra el nombre de la ciudad y seria el key) y con eso ir al objeto a buscar el value

Cabe mencionar que agregue solo 3 ciudades.

EDICION

var provincias = new Array()
provincias[1] = ["Elige provincia", "Almería", "Cádiz", "Córdoba",
  "Granada", "Huelva", "Jaen", "Málaga", "Sevilla"
]

var imagenes = new Array()
imagenes[1] = new Array()
imagenes[1][1] = ["https://placeimg.com/640/480/people"]
imagenes[1][2] = ["https://placeimg.com/640/480/animals"]
imagenes[1][3] = ["https://placeimg.com/640/480/nature"]
imagenes[1][4] = ["https://placeimg.com/640/480/arch"]
imagenes[1][5] = ["https://placeimg.com/640/480/arch/sepia"]
imagenes[1][6] = ["https://placeimg.com/640/480/arch/sepia"]
imagenes[1][7] = ["https://placeimg.com/640/480/arch/sepia"]
imagenes[1][8] = ["https://placeimg.com/640/480/arch/sepia"]

function eligeprovincia(lista) {
  var comseleccionada = lista.comunidades.selectedIndex
  lista.listaprovincias.length = provincias[comseleccionada].length
  for (i = 0; i < lista.listaprovincias.length; i++) {
    lista.listaprovincias.options[i].text = provincias[comseleccionada][i]
  }
}

function muestraimagen(lista) {
  //Con los indices puedes acceder directamente a los valores de tu array bidimensional
  var comseleccionada = lista.comunidades.selectedIndex
  var laimagen = lista.listaprovincias.selectedIndex
  document.imagen.src = imagenes[comseleccionada][laimagen];
  document.imagen.style.display = "block";


}
<form>
  <select name="comunidades" onchange="eligeprovincia(this.form)">
    <option selected>Elige comunidad</option>
    <option>Andalucia</option>
  </select>
  <select name="listaprovincias" onchange="muestraimagen(this.form)">
    <option></option>
  </select>
  <div><img style="display:none" name="imagen" id="imagen" alt="Imagenes">
  </div>
</form>

10
  • muchas gracias por tu respuesta, lo tengo asi porque lo he querido hacer con vectores bidimensionales
    – ShowMaster
    Commented el 11 feb. 2020 a las 22:28
  • esque estuvimos practicando eso, y queria probarlo en este ejercicio, podrias con mi codigo poder hacer lo mismo? que en vez del tercer select aparezca un div con la imagen?
    – ShowMaster
    Commented el 11 feb. 2020 a las 22:36
  • MUCHISIMAS GRACIASS!!!
    – ShowMaster
    Commented el 12 feb. 2020 a las 0:03
  • @Luis Fernando me pareció muy interesante lo que resolviste, quizás me puedas dar un norte de como resolver un tema de select anidados que no me quiere funcionar adecuadamente del cual parte de mi código esta en este mismo post,
    – Cesarin
    Commented el 12 feb. 2020 a las 18:55
  • Claro, pero no entendí muy bien que es lo que ocupas, @CESARROMO
    – Alvarez
    Commented el 12 feb. 2020 a las 19:33
1

Te dejo una forma de actualizar un select basado en otro select, es decir, combo anidados, quizás puedas aplicar algún segmento de este código a tu necesidad.

function cargarSelect(number){
    $("#Unidades"+number).on('change', function () { // 1
            $("#Unidades"+number+" option:selected").each(function(){ // 2
            var cadenaCCT = $(this).val(); //3
            $.post("cargarPersonal.php",{cadenaCCT:cadenaCCT},function(data) { //4
                $("#Personal"+number).html(data); // 5
            });
        });
    });
};
  1. Detecta el cambio en el select.
  2. Escucha o lee el cambio y toma el valor de referencia id o el que le indiques.
  3. Asigna el valor.
  4. Lo pasa como parámetro a una función localizada en el archivo indicado.
  5. Muestra el contenido.
3
  • gracias por la respuesta, pero lo necesito en javascript puro! no jquery, pero gracias igualmente!
    – ShowMaster
    Commented el 11 feb. 2020 a las 21:34
  • De nada Johathan por lo que leo estas empapado en javascript, estando buscando como resolver un problema que tengo encontré este enlace developer.mozilla.org/es/docs/Web/JavaScript/Guide/… a lo mejor alguna de las explicaciones que vienen ahí podrían ser de utilidad
    – Cesarin
    Commented el 11 feb. 2020 a las 22:09
  • Dejo el enlace de la pregunta en donde usaste este código por primera vez ( es decir, hablando en tercera persona, en donde @CESARROMO la usó anteriormente ). es.stackoverflow.com/questions/328225/…
    – user13558
    Commented el 11 feb. 2020 a las 23:24

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.