Re: [PHP-ES] Select / Menu desplegable dinámico
[email protected] (David Fraga)
| Newsgroups | php.general.es |
|---|---|
| Organization | nemondemand.com |
| Message-ID | <1291363158.2420.20.camel@david-Vostro-3500> |
El jue, 02-12-2010 a las 19:30 +0100, Lluís Abad - GMAIL escribió:
> Hola a todos/as!!!!
> Tengo un problemilla i no sé muy bien como resolverlo
> Necesito hacer un menú con 2 selects desplegables dinámicos.
> El primero no hay problema, sé algo de PHP, por tanto lo cargo
> dinámicamente, leyendo de la DB de MySQL y listos.
> El problema es que el 2o depende del primero y ahí no sé cómo lo puedo
> recargar ya que al programa no le consta el valor del primero hasta que has
> aceptado el submit, por tanto no puedo crear una query para el segundo en
> base del primero.
> Seria algo así como el ejemplo: Países/Capitales
> España/Madrid
> /Barcelona
> Valencia
> Alemania / Berlín
> / Frankfurt....
> Cuando la primera select vale España, le pongo sus capitales, pero, cómo
> puedo saber el valor de la primera sin que el usuario haga el submit?
> Agradecería que me dieseis alguna pista o si me podéis dar algún código que
> lo haga pues genial.
> Estuve mirando por ahí i parece que se puede hacer con AJAX pero no tengo ni
> idea de eso y la verdad por lo que me estuve mirando así a primera vista no
> lo vi nada trivial ni sencillo sino bastante complicado.
> Muchas gracias por vuestra ayuda!!!!
Si las respuestas que te han dado, no te valen porque buscas hacerlo tú
de forma sencilla, lo primero que debes hacer es cargar toda la
estructura en un array, en javascript, una vez hecho esto, debes cargar
de forma dinámica (otra vez con javascript) los contenidos, según desees
o desee el usuario.
En lugar de en un array y de forma más sencilla, puedes ponerlo en sus
respectivos combos, dentro de capas DIV y las pones invisibles de
momento, según se seleccione en el primer combo, haces visible uno u
otro.
Por ejemplo:
<div id="paises">
<select name="paises" onclick="javascript: mostrar(this);">
<option value="1">España</option>
<option value="2">Portugal</option>
</select>
</div>
<div id="provincias-españa">
<select name="provincias-españa">
<option value="1">Barcelona</option>
</select>
</div>
<div id="provincias-portugal">
<select name="provincias-portugal">
<option value="1">Lo que sea</option>
</select>
</div>
Y en un CSS pones:
#provincias-españa {
visibility: hidden;
}
#provincias-portugal {
visibility: hidden;
}
Ahora, con javascript, debes hacer la funcionalidad de mostrar uno u
otro div según selección del usuario en el primer combo al hacer click,
por eso el onclick="...":
<script>
function mostrar(ctrl) {
alert(ctrl.options[ctrl.selectedIndex].value);
if(ctrl.options[ctrl.selectedIndex].value == 1) {
var obj= document.getElementById('provincias-españa')
obj.style.visibility='visible';
var obj= document.getElementById('provincias-portugal')
obj.style.visibility='hidden';
} else {
var obj= document.getElementById('provincias-españa')
obj.style.visibility='hidden';
var obj= document.getElementById('provincias-portugal')
obj.style.visibility='visible';
}
}
</script>
Todo junto:
<html>
<head>
<script>
function mostrar(ctrl) {
alert(ctrl.options[ctrl.selectedIndex].value);
if(ctrl.options[ctrl.selectedIndex].value == 1) {
var obj= document.getElementById('provincias-españa')
obj.style.visibility='visible';
var obj= document.getElementById('provincias-portugal')
obj.style.visibility='hidden';
} else {
var obj= document.getElementById('provincias-españa')
obj.style.visibility='hidden';
var obj= document.getElementById('provincias-portugal')
obj.style.visibility='visible';
}
}
</script>
<style type="text/css">
#provincias-españa {
visibility: hidden;
}
#provincias-portugal {
visibility: hidden;
}
</style>
</head>
<body>
<div id="paises">
<select name="paises" onclick="javascript: mostrar(this);">
<option value="1">España</option>
<option value="2">Portugal</option>
</select>
</div>
<div id="provincias-españa">
<select name="provincias-españa">
<option value="1">Barcelona</option>
</select>
</div>
<div id="provincias-portugal">
<select name="provincias-portugal">
<option value="1">Lo que sea</option>
</select>
</div>
</body>
<html>
signature.asc
(application/pgp-signature, 490 B)
-----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.10 (GNU/Linux) iQEcBAABAgAGBQJM+KNUAAoJEMS7g35dsiRiVvQH/RyzSir/D7XP1tNX0PC7MwYq vIczxc8kwUNLCvbGIFPnNQKsYlGq8z/8c41yGhozfgAwt1ZbcLCpSdU9+cRudvzL UX3rNX/VF+MrSE1K8vgW9AgjT8XtXY7iuXXKu1OZgjaNyfv9Hxvn5TL5ickrju39 8/S7BaofkM19jRzEVdtLWrG9/XDxf0GMvvIwfzM9YJ9HaXKMWcW+x9sXljcD75Rg 8vRZ80Bvwx9WQ4daPJjVJgtHWLt2y9vbhwj6+U++3z0rUkKLpvmid1njq5nbuUCI vSw3LFmEe8TH1JpbfwnYiV861FUNmWc5cyqDYBzgy23Cpky5mCiMPPE6BtW3U3s= =+uoO -----END PGP SIGNATURE-----