Skip to main content
1 de 5

mostrar imagen despues de select dependientes javascript

he generado dos listas, una dependiente de la otra(Comunidad : ciudad : imagen), y no consigo que se muestre una imagen en la ultima columna, y que en cada vector de imagenes, yo pueda mostrar una imagen una vez seleccionada la ciudad. Lo unico que he conseguido es generar otro select donde muestra el mensaje de "aqui va una imagen de ...", pero quiero que ne vez de un select salga una imagen en un contendor div.

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]
        }
}

Y aqui el cuerpo

    <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