Sincronizar 3 combos
Tengo un combo, el cual al seleccionar un elemento, otros combos
subsecuentes cambien se contenido, por ejemplo si selecciono en el combo de país Cuba, en otro me aparezcan después las provincias y al seleccionar una provincia me muestre en otro de abajo las ciudades.
Todo esto lo cojo de una BD. Dime como hacer el cambia y cambia ese sin necesidad de refrescar la página.
Me han hablado de trabajar con el evento Onchange de los select pero es que no se mucho de Javascript.
subsecuentes cambien se contenido, por ejemplo si selecciono en el combo de país Cuba, en otro me aparezcan después las provincias y al seleccionar una provincia me muestre en otro de abajo las ciudades.
Todo esto lo cojo de una BD. Dime como hacer el cambia y cambia ese sin necesidad de refrescar la página.
Me han hablado de trabajar con el evento Onchange de los select pero es que no se mucho de Javascript.
1 Respuesta
Respuesta de bubebu
1
¿Si me he enterado bien lo que quieres es que todo se procese en el cliente hasta que se envíe el formulario con todos los datos?
Ten en cuenta que para esto deberías tener almacenados todos los países, provincias y ciudades en un array de JavaScript y no en la base de datos. Al crear el formulario tendrías que incluir todos esos datos en la página y transferirlos al cliente. De esta manera si tiene pocos datos funcionaría bien, pero cuando tengas muchos datos sería bastante pesado.
Calcula el número de países que vas a tener, el número de provincias y el número de ciudades. Luego calcula lo que ocuparía cada uno de media. Por ejemplo Cuba ocupa solo 4 pero tendrás otros que pueden ocupar hasta 20 bytes.
He intentado crear un código aproximado de como sería, pero se complica demasiado. Necesitas un array para países, otro para provincias y otro para ciudades, teniendo en cuenta que se pueden repetir. Luego necesitarías un array que relacionase los tres.
El código aproximado de cómo sería es el siguiente:
<html><head>
<script language='JavaScript'>
<?php
// calcular el máximo de paises en $maxPais
for {$pais = 0; $pais < $maxPais; $pais++) {
echo "MaxPais = $maxPais;";
// Obtener de la base de datos el nombre del pais $pais en $elPais
echo "Pais[$pais] = $elPais;
//calcular el máximo de provincias del pais $pais en $maxProv
for ($prov = 0; $prov < $maxProv; $prov++) {
echo "MaxProv = $maxProv;";
// Obtener de la base de datos el nombre de la provincia $prov en $laProv
echo "Prov[$prov] = $laProv;
//calcular el máximo de ciudades del pais $pais y de la provincia $prov en $maxCiudad
for ($ciudad = 0; $ciudad < $maxCiudad; $ciudad++) {
echo "MaxCiudad = $maxCiudad;";
// Coger de la base de datos el nombre de la ciudad $ciudad que se corresponde a la provincia $prov y al país $pais, en $laCiudad
echo "Valores[$pais][$prov][$ciudad]= $laCiudad";
}
}
}
?>
Tienes que crear una función que rellene el combo de país. Lo haces en php igual que la otra vez. Ese no cambia.
Ahora ya tienes creados los arrays con los datos y las variables para manejarlos. En cada SELECT del formulario tienes que ponerlo de forma parecido a
<SELECT name='pais' onChange='CambiaCiudad();'>
La función CambiaCiudad() tiene que rellenar el SELECT de ciudades:
function CambiaCiudad() {
for (i=0; i<MaxCiudad; i++) {
document.forms.formulario.ciudades.options.text = Valores[document.forms.formulacio.pais.selected][document.forms.fomrulario.provincias.selectedIndex][$i];
document.forms.formulario.ciudades.options.value = Valores[document.forms.formulacio.pais.selected][document.forms.fomrulario.provincias.selectedIndex][$i];
}
}
Y para las provincias sería más complicado porque habría que seleccionar solo las que correspondan a una ciudad. Con lo cual no necesitamos solo tres arrays sino 4. Habría que crear uno más.
Como ves, cada vez se complica más. En mi opinión creo que es mucho más sencillo con php ejecutando en el servidor cada cambio de cada combo, por el uso de la base de datos que facilita todas las tareas. En javaScript no puedes usar la base de datos.
No te molestes en ejecutar el código que te pongo en JavaScript porque lo hago a modo de esquema sin probarlo y no creo que funcione. Es para esquematizar un poco cómo sería. Si realmente estás interesado probaría el código.
Valora que es mejor para tu sitio web.
Ten en cuenta que para esto deberías tener almacenados todos los países, provincias y ciudades en un array de JavaScript y no en la base de datos. Al crear el formulario tendrías que incluir todos esos datos en la página y transferirlos al cliente. De esta manera si tiene pocos datos funcionaría bien, pero cuando tengas muchos datos sería bastante pesado.
Calcula el número de países que vas a tener, el número de provincias y el número de ciudades. Luego calcula lo que ocuparía cada uno de media. Por ejemplo Cuba ocupa solo 4 pero tendrás otros que pueden ocupar hasta 20 bytes.
He intentado crear un código aproximado de como sería, pero se complica demasiado. Necesitas un array para países, otro para provincias y otro para ciudades, teniendo en cuenta que se pueden repetir. Luego necesitarías un array que relacionase los tres.
El código aproximado de cómo sería es el siguiente:
<html><head>
<script language='JavaScript'>
<?php
// calcular el máximo de paises en $maxPais
for {$pais = 0; $pais < $maxPais; $pais++) {
echo "MaxPais = $maxPais;";
// Obtener de la base de datos el nombre del pais $pais en $elPais
echo "Pais[$pais] = $elPais;
//calcular el máximo de provincias del pais $pais en $maxProv
for ($prov = 0; $prov < $maxProv; $prov++) {
echo "MaxProv = $maxProv;";
// Obtener de la base de datos el nombre de la provincia $prov en $laProv
echo "Prov[$prov] = $laProv;
//calcular el máximo de ciudades del pais $pais y de la provincia $prov en $maxCiudad
for ($ciudad = 0; $ciudad < $maxCiudad; $ciudad++) {
echo "MaxCiudad = $maxCiudad;";
// Coger de la base de datos el nombre de la ciudad $ciudad que se corresponde a la provincia $prov y al país $pais, en $laCiudad
echo "Valores[$pais][$prov][$ciudad]= $laCiudad";
}
}
}
?>
Tienes que crear una función que rellene el combo de país. Lo haces en php igual que la otra vez. Ese no cambia.
Ahora ya tienes creados los arrays con los datos y las variables para manejarlos. En cada SELECT del formulario tienes que ponerlo de forma parecido a
<SELECT name='pais' onChange='CambiaCiudad();'>
La función CambiaCiudad() tiene que rellenar el SELECT de ciudades:
function CambiaCiudad() {
for (i=0; i<MaxCiudad; i++) {
document.forms.formulario.ciudades.options.text = Valores[document.forms.formulacio.pais.selected][document.forms.fomrulario.provincias.selectedIndex][$i];
document.forms.formulario.ciudades.options.value = Valores[document.forms.formulacio.pais.selected][document.forms.fomrulario.provincias.selectedIndex][$i];
}
}
Y para las provincias sería más complicado porque habría que seleccionar solo las que correspondan a una ciudad. Con lo cual no necesitamos solo tres arrays sino 4. Habría que crear uno más.
Como ves, cada vez se complica más. En mi opinión creo que es mucho más sencillo con php ejecutando en el servidor cada cambio de cada combo, por el uso de la base de datos que facilita todas las tareas. En javaScript no puedes usar la base de datos.
No te molestes en ejecutar el código que te pongo en JavaScript porque lo hago a modo de esquema sin probarlo y no creo que funcione. Es para esquematizar un poco cómo sería. Si realmente estás interesado probaría el código.
Valora que es mejor para tu sitio web.
