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:
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.
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
0