HTML - menu select mas complejo

 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 21 puestos en HTML (en relación al último mes)
Gráfica de HTML

menu select mas complejo

Publicado por David (1 intervención) el 20/06/2018 07:14:18
Buenas noches amigos, estoy realizando un Menu option para mi web pero me encuentro estancado de hace 2 dias, resulta que quiero colocar un menu option que de acuerdo a la seleccion que se tome se muestre una imagen y a demas exista otro menu option que modifique sus valores internos de acuerdo a la seleccion del primero, ya consegui un ejemplo de como hacer la parte de los select menu pero con la imagen no he podido.
les coloco un codigo de ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html><head>
 
	<script>
	function cargarProvincias() {
    var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];
    array.sort();
    addOptions("provincia", array);
}
 
 
//Función para agregar opciones a un <select>.
function addOptions(domElement, array) {
    var selector = document.getElementsByName(domElement)[0];
    for (provincia in array) {
        var opcion = document.createElement("option");
        opcion.text = array[provincia];
        // Añadimos un value a los option para hacer mas facil escoger los pueblos
        opcion.value = array[provincia].toLowerCase()
        selector.add(opcion);
    }
}
 
 
 
function cargarPueblos() {
    // Objeto de provincias con pueblos
    var listaPueblos = {
      cantabria: ["Laredo", "Gama", "Solares", "Castillo", "Santander"],
      asturias: ["Langreo", "Villaviciosa", "Oviedo", "Gijon", "Covadonga"],
      galicia: ["Tui", "Cambados", "Redondella", "Porriño", "Ogrove"],
      andalucia: ["Dos Hermanas", "Écija", "Algeciras", "Marbella", "Sevilla"],
      extremadura: ["Caceres", "Badajoz", "Plasencia", "Zafra", "Merida"]
    }
 
    var provincias = document.getElementById('provincia')
    var pueblos = document.getElementById('pueblo')
    var provinciaSeleccionada = provincias.value
 
    // Se limpian los pueblos
    pueblos.innerHTML = '<option value="">Seleccione un Pueblo...</option>'
 
    if(provinciaSeleccionada !== ''){
      // Se seleccionan los pueblos y se ordenan
      provinciaSeleccionada = listaPueblos[provinciaSeleccionada]
      provinciaSeleccionada.sort()
 
      // Insertamos los pueblos
      provinciaSeleccionada.forEach(function(pueblo){
        let opcion = document.createElement('option')
        opcion.value = pueblo
        opcion.text = pueblo
        pueblos.add(opcion)
      });
    }
 
  }
 
 // Iniciar la carga de provincias solo para comprobar que funciona
cargarProvincias();
 
		</script>
	</head>
	<body>
    <table>
   <tr>
	   <td align=right>Provincia:</td>
      <td colspan="3" align="left">
          <!-- Añadido onchange para cargar los pueblos -->
          <select name="provincia" id="provincia" onchange="cargarPueblos();">
              <option value="Seleccione Modelo" selected="selected">Seleccione Provincia</option>
          <option value="andalucia">Andalucia</option>
			  <option value="asturias">Asturias</option>
			  <option value="cantabria">Cantabria</option>
			  <option value="extremadura">Extremadura</option>
			  <option value="galicia">Galicia</option></select>
 
      </td>
  </tr>
  <tr>
      <td align=right>Pueblo:</td>
      <td align=left colspan=3>
          <select name="pueblo" id="pueblo">
              <!-- Hay que terminar los options -->
              <!-- 
                   Eliminado de value la llamada a la función,
                   si eso funciona lo desconocía, y aunque 
                   lo haga es totalmente innecesario, 
                   lo correcto es usar el evento onchange 
                -->
              <option value="">Seleccione un Pueblo...</option>
          </select>
      </td>
  </tr>
</table>


basicamente lo que quiero es si selecciono una provincia de este ejemplo se muestre una imagen distinta de cada provincia, espero puedan ayudarme. la imagen va a mostrarse en una casilla de una tabla cualquiera.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder