Ver Mensaje Individual
  #2 (permalink)  
Antiguo 14/05/2010, 04:11
jorget
 
Fecha de Ingreso: enero-2005
Mensajes: 28
Antigüedad: 19 años, 9 meses
Puntos: 0
Respuesta: Ayuda con select's "dependientes"

Cita:
Iniciado por rigeliux1 Ver Mensaje
Buenas, antes que nada, se que en las faq hay un ejemplo de mi problema pero no llena al 100% lo que necesito y bueno, queria ver si me podian hechar una manita...el problema que tengo es el siguiente:

Tengo un conjunto de selects(por decir algo, 4),
1)Continente
2)Pais
3)Estado
4)Ciudad
(tener en cuenta que lo que puse es para ilustrar el ejemplo)

Al ver el formulario cada select debe mostrar tooooooda la información, es decir, en continente, pos los 4 que existen, en pais los XX que existen, en estado los XXXXXX que existen, etc..., entonces me gustaría que cada select al cambiar solo afecte a los que están abajo de el, es decir, si cambio el continente, pues que me cambie todos los demas, pero si cambio el de estado, solo me muestre las ciudades de ese estado (algo asi como un filtrado).

Para todo esto, la información la voy a obtener de una base de datos, tns al cambiar un select debe mandar la peticion via php al server que le filtre los resultados (que esto lo se hacer pero no para mostrar en los selects :S )

Jejej por eso llame al tema como select's "depedientes" pk si depende n+1 de lo que se seleccione en n, pero sino se selecciona nada (o vuleve a seleccionarse "elija una opcion"), te muestra toooodas las opciones.

Bueno ejejej espero haberme dado a entender lo mejor posible. Gracias
Hola rigeliux.

Yo he hecho que eso que dices funcione con Provincia y Poblaciones. Una vez que eliges la provincia, te carga en poblaciones las que corresponden a esa provincia.

La verdad no es muy complicado, he ido mirando por internet ejemplos y algún librico bajado en pdf y al final lo he conseguido, no se si es como debe hacerse, pero funciona.

Para que te muestre la información en los select debes capturar el xml que te devuelva la petición e irlo cargando mediante javascript en el otro select, algo así:

Código:
	
// FUNCIÓN PARA PROCESAR QUE AL ELEGIR UNA PROVINCIA CARGUE SUS POBLACIONES	
		function procesarPoblaciones()
		{
			if(conexion1.readyState == 4)
			{
				// Carga la respuesta del XML en una variable
                                var xml = conexion1.responseXML; 
                               // Asigna en poblaciones el select donde voy a cargar según la provincia elegida
				var poblaciones = document.getElementById('poblaciones');
                                // Inicializo a 0 las poblaciones, o sea, borro la lista
				poblaciones.options.length = 0;
				// Recojo en pals todas las etiquetas llamadas población que me se me han devuelto en xml 		
				var pals = xml.getElementsByTagName('poblacion');
	                        
                                // Recorro todo pals cada una de las poblaciones de la provincia elegida
				for (i=0; i < pals.length;i++) {
                                        // asigno a item el contenido de la poblacion en la que nos encontramos =>  [i]
					var item = xml.getElementsByTagName('poblacion')[i]; 
                                        // asigno a codigo el valor del codigo de la poblacion para posteriormente ponerlo como value en el select
					var codigo = item.getElementsByTagName('codigo')[0].firstChild.data; 	
                                        // asigno a nombre el valor de nombre de la poblacion para posteriormente ponerlo en el text del select
					var nombre = item.getElementsByTagName('nombre')[0].firstChild.data; 	
				        // Creo en op un elemento del tipo option que será una opción del select
					var op = document.createElement('option');
					// Asigno a texto la creacion de un nodo con la poblacion actual (esto no se muy bien para que, lo copié de algún lado)
					var texto = document.createTextNode(pals[i].firstChild.nodeValue);
					// En el elemento creado "op" cambio el valor por el del codigo de la provincia
					op.value = codigo;	
                                        // En el elemento creado "op" cambio el texto por el del nombre de la provincia
					op.text = nombre;
					// Este try es para que dependiendo si utilizamos IE o Mozilla añada de una forma u otra al select	
					try {
						poblaciones.add(op, null); // standards compliant; doesn't work in IE
					}
					catch(ex) {
						poblaciones.add(op); // IE only
					}						
				}
			} 
		}
Bueno así lo he hecho yo, tengo que decir que mi estructura en xml sigue la siguiente forma:

Código:
<?xml version="1.0" ?> 
- <poblaciones>
- <poblacion>
  <codigo>103</codigo> 
  <nombre>Adsubia</nombre> 
  </poblacion>
- <poblacion>
  <codigo>81</codigo> 
  <nombre>Agost</nombre> 
  </poblacion>
- <poblacion>
  <codigo>136</codigo> 
  <nombre>Agres</nombre> 
  </poblacion>
- <poblacion>
  <codigo>60</codigo> 
  <nombre>Aigües</nombre> 
  </poblacion>
- <poblacion>
  <codigo>28</codigo> 
  <nombre>Albatera</nombre> 
  </poblacion>
- <poblacion>
  <codigo>88</codigo> 
  <nombre>Alcalalí</nombre> 
  </poblacion>
- <poblacion>
  <codigo>139</codigo> 
  <nombre>Alcocer de Planes</nombre> 
  </poblacion>
</poblaciones
De ahí que utilice codigo y nombre para asignar al select.

Espero que te sirva de ayuda. Ahora solo te quedaría adaptarlo a tus 4 campos, conforme vayas eligiendo un item del select, haces una petición diferente con AJAX que te devuelva un xml y lo tratas para asignarlo a los otros selects.

Saludos