3 selects dependientes

unexes · #1 (**permalink**) 05/08/2012, 12:05

Hola a tod@s, necesito vuestra ayuda.

Vereis siguiendo un tutorial he hecho estos 3 selects dependientes que funcionan perfectamente y cuyo código completo pongo a continuación para que lo utilice quien lo necesite.
El motivo de dirigirme a vosotr@s es que debido a mis escasos conocimientos no se mejorarlo y me gustaria hacerlo ya que he comprobado que hay mucha información en la red pero ciertas cosas que para algunos son sencillas, para otros como yo resultan complicadas y no se esplican bien es por eso que preciso vuestra ayuda.
1º) Vereis necesito obtener: 3 variables una que corresponda al pais seleccionado, otra a la provincia seleccionada y otra a la población con el fín de utilizarlas luego en una consulta. y no se como sacarlas y pasarlas a la página "Principal.php".
2º) ¿Seria posible poner todo el código en una misma página?.
3ª) Me gustaria que de todos lo valores con los que se rellena cada select aparecieran en cada uno de ellos un valor por defecto pero que me permitira poder seleccionar otro de los valores ya que si en la <option value="0">seleccione etc..</option>pongo un valor aparece dicho valor pero no me deja seleccionar otro.

Principal.php

Código PHP:

Ver original<script type="text/javascript" language="javascript" src="Funciones.js"></script>
 
<?php
        require_once('../Connections/ConexionInmobiliaria.php');
        $selpoblacion = isset($_GET["selpoblacion"])? $_GET["selpoblacion"]: '';
        $selprovincia = isset($_GET["selprovincia"])? $_GET["selprovincia"]: '';
?>
<body onLoad="limpiar()">
<FORM NAME="form1">
<div id="ContPais">
  <div id="NomPais"><font color="#666666" style=" font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:10pt">Seleccionar Lugar:</font></div>
  <div id="SelPais">
<?php 
$sql="select* from pais order by pais asc";
$res=mysql_query($sql,$conexion);
?>
<select name="selpais" onChange="from(document.form1.selpais.value,'SelProvincia','Provincias.php')" id="selpais" size="1" class="Guias2">
<option value="0">Seleccione el pais</option>
<?php 
while ($reg=mysql_fetch_array($res))
{
?>
<option value="<?php echo $reg["id"];?>"><?php echo $reg["pais"];?></option>
<?php
    }
?>
</select>
</div>
<div id="SelProvincia">
<select name="selprovincia" id="selprovincia" size="1" class="Guias2">
<option value="0">Seleccione la provincia</option>
</select>
</div>
  <div id="SelPoblacion">
<select name="selpoblacion" id="selpoblacion" size="1" class="Guias2">
<option value="0">Seleccione la población</option>
</select>
</div>
</div>
</FORM>
</body>

Provincias.php

Código PHP:

Ver original<?php 
require_once('../Connections/ConexionInmobiliaria.php');
header("Content-Type: text/html;charset=iso-8859-1");
 
 
$sql="select* from provincias where Cod_Pais=".$_GET["id"]." order by Provincia asc";
$res=mysql_query($sql,$conexion);
?>
<select name="selprovincia" onChange="from(document.form1.selprovincia.value,'SelPoblacion','Poblaciones.php')" id="selprovincia" size="1" class="Guias2">
<option value="0">Seleccione la provincia</option>
 
<?php 
while ($reg=mysql_fetch_array($res))
{
?>
<option value="<?php echo $reg["id"];?>"><?php echo $reg["Provincia"];?></option>
<?php
    }
?>
 
</select>

Poblaciones.php

Código PHP:

Ver original<?php 
require_once('../Connections/ConexionInmobiliaria.php');
header("Content-Type: text/html;charset=iso-8859-1");
 
 
$sql="select* from poblaciones where Cod_Provincia=".$_GET["id"]."";
$res=mysql_query($sql,$conexion);
?>
<select name="selpoblacion" id="selpoblacion" size="1" class="Guias2">
<option value="0">Seleccione la población</option>
 
<?php 
while ($reg=mysql_fetch_array($res))
{
?>
<option value="<?php echo $reg["id"];?>"><?php echo $reg["Poblacion"];?></option>
<?php
    }
?>
 
 
</select>

Funciones.js

Código Javascript:

Ver originalfunction obtiene_http_request()
{
var req = false;
try
  {
    req = new XMLHttpRequest(); /* p.e. Firefox */
  }
catch(err1)
  {
  try
    {
     req = new ActiveXObject("Msxml2.XMLHTTP");
  /* algunas versiones IE */
    }
  catch(err2)
    {
    try
      {
       req = new ActiveXObject("Microsoft.XMLHTTP");
  /* algunas versiones IE */
      }
      catch(err3)
        {
         req = false;
        }
    }
  }
return req;
}
var miPeticion = obtiene_http_request();
//***************************************************************************************
function from(id,ide,url){
        var mi_aleatorio=parseInt(Math.random()*99999999);//para que no guarde la página en el caché...
        var vinculo=url+"?id="+id+"&rand="+mi_aleatorio;
        //alert(vinculo);
        miPeticion.open("GET",vinculo,true);//ponemos true para que la petición sea asincrónica
        miPeticion.onreadystatechange=miPeticion.onreadystatechange=function(){
               if (miPeticion.readyState==4)
               {
                   //alert(miPeticion.readyState);
                       if (miPeticion.status==200)
                       {
                                //alert(miPeticion.status);
                               //var http=miPeticion.responseXML;
                               var http=miPeticion.responseText;
                               document.getElementById(ide).innerHTML= http;
 
                       }
               }/*else
               {
            document.getElementById(ide).innerHTML="<img src='ima/loading.gif' title='cargando...' />";
 
                }*/
       }
       miPeticion.send(null);
 
}
//************************************************************************************************++
function limpiar()
{
    document.form1.reset();
    
}

Bueno eso es todo de momento, si podeis ayudarme lo agradeceria.
Gracias a todos

unexes · #2 (**permalink**) 08/08/2012, 01:42

Hola de nuevo.

Alguien puede ayudarme para obtener de este código: 3 variables una que corresponda al pais seleccionado, otra a la provincia seleccionada y otra a la población con el fín de utilizarlas luego en una consulta. pues debido a mi falta de dichos conocimientos no se como sacarlas y pasarlas a la página "Principal.php".

Gracias y un saludo.

sjj · #3 (**permalink**) 08/08/2012, 02:12

Hola. Ante todo te recomiendo utilizar cosas que comprendas, ya que sino lo entendés es muy probable que deje de funcionar. Yo acá te dejo un ejemplo armado con 2 níveles, pero podés convertirlo en 3, 4 o la cantidad que gustes.

La función Javascript:

Código HTML:

<script type="text/javascript">
function slctr(texto,valor){
	this.texto = texto
	this.valor = valor
}
	
var Chubut=new Array()
	Chubut[0] = new slctr("Comodoro Rivadavia Centro",'Comodoro Rivadavia Centro')
	Chubut[1] = new slctr("Comodoro Rivadavia Apt",'Aeropuerto de Comodoro Rivadavia')
	Chubut[2] = new slctr("Esquel Centro",'Esquel Centro')
	Chubut[3] = new slctr("Esquel Apt",'Aeropuerto de Esquel')
	Chubut[4] = new slctr("Puerto Madryn Centro",'Puerto Madryn Centro')
	Chubut[5] = new slctr("Puerto Madryn Apt",'Aeropuerto de Puerto Madryn')
    Chubut[6] = new slctr("Trelew Centro",'Trelew Centro')
	Chubut[7] = new slctr("Trelew Apt",'Aeropuerto de Trelew')
	
var Cordoba=new Array()
	Cordoba[0] = new slctr("Córdoba Centro",'Cordoba Centro')
	Cordoba[1] = new slctr("Córdoba Apt",'Aeropuerto de Cordoba')
	Cordoba[2] = new slctr("Río Cuarto",'Rio Cuarto')
	
var Mendoza=new Array()
	Mendoza[0] = new slctr("Mendoza Centro",'Mendoza Centro')
	Mendoza[1] = new slctr("Mendoza Apt",'Aeropuerto de Mendoza')
	Mendoza[2] = new slctr("San Rafael Centro",'San Rafael Centro')
	Mendoza[3] = new slctr("San Rafael Apt",'Aeropuerto de San Rafael')
					
function slctryole(cual,donde){
	if(cual.selectedIndex != 0){
		donde.length=0
		cual = eval(cual.value)
		for(m=0;m<cual.length;m++){
			var nuevaOpcion = new Option(cual[m].texto);
			donde.options[m] = nuevaOpcion;
			if(cual[m].valor != null){
				donde.options[m].value = cual[m].valor
			}
			else{
				donde.options[m].value = cual[m].texto
			}
		}
	}
}
</script>

Y el llamado a la misma:

Código HTML:

<select name="select" onchange="slctryole(this,this.form.select2)">
            <option></option>
            <option value="Chubut">Chubut</option>
            <option value="Cordoba">C&oacute;rdoba</option>
            <option value="Mendoza">Mendoza</option>
            </select>
            <option></option>
          </select>
<select name="select2">
            <option></option>
          </select>

Los datos los recogés como en cualquier select común desde la página a la que te dirige al enviar el formulario.

unexes · #4 (**permalink**) 08/08/2012, 02:47

Gracias Sjj por tu rapida respuesta.

Como ya comente no tengo muchos conocimientos en este tema mi problema es que utilizo una base de datos y debo seguir utilizandola ya que contiene todos los paises, todas las ciudades, y todas las poblaciones del mundo, mas o menos, y no se como implementar en tu javascript mi base de datos.

Recuperar un valor en una variable de un select lo he hecho en otros lugares de mi página pero en este caso de selects dependientes y con el código que he puesto que lo saque de un tutorial no lo he conseguido hacer ni se como hacerlo, si puedes ayudarme partiendo del código que tengo puesto te lo agradeceria.

Estoy perdido, y ya llevo así varios días, buscando por la red pero no encuentro como pasar el valor seleccionado en cada uno de los selects a tres distintas variables para luego utilizarlas en una nueva consulta.

Gracias por tu esfuerzo en ayudarme, un saludo.

ocp001a · #5 (**permalink**) 08/08/2012, 11:01

Disculpa si sueno rudo, pero si tienes escasos conocimientos, prácticamente cualquier ejemplo te resultará complicado, por muy bien explicado que esté.

Yo publiqué aquí un script con xajax a 3 niveles precisamente ejemplificando con una estructura tipo país-estado-ciudad. Revisa si te sirve: http://www.forosdelweb.com/f18/aport...-xajax-992047/

unexes · #6 (**permalink**) 09/08/2012, 02:34

Tranquilo ocp001a no eres rudo, simplemente tu tienes conocimientos en este campo que yo no tengo. Veras lo que pasa es que como yo soy autodidacta y algo mayor me cuesta mas que a otros y algunas veces solo comprendo el funcionamiento cuando alguien me lo esplica y lo veo.

Como tengo escasos conocimientos efectivamente cualquier ejemplo me resulta muy complicado, pero me he dado cuenta que para poder sacar esas 3 variables del código que tengo, he que hacer de todo (sustituir el código que tengo por otro diferente, cambiar la tabla, etc...) antes de que alguien me oriente como hacerlo con el código que tengo.

Mi pregunta inicial no era que estaba buscando un código o una forma de hacer 3 selects dependientes, mi primera pregunta era como recuperar los valores de los selects del código que pongo y pasarlos a unas variables, por lo tanto no quiero cambiar la totalidad del código que tengo por uno diferente, ni mi base de datos, porque los selects funcionan y porque seria admitir una derrota antes de haber luchado para sacarlo adelante, creo que no debe ser nada complicado para los que saben, saber cual es el valor que toman los diferentes selects y pasar cada uno de esos valores a una variable, por lo tanto lo seguire intentando, y cuando lo consiga porsupuesto pondre aquí el resultado.

Gracias por vuestra ayuda y creo ocp001a que el código tuyo que me aconsejaste esta muy bien, no obstante quiero sacar adelante este código que como ya indique al principio lo hice con un tutorial justamente para poder aprender, lo que ocurre es que no indicaba como recuperar los valores de los selects.

Un saludo.

ocp001a · #7 (**permalink**) 09/08/2012, 12:14

Depende a qué le llames recuperar los valores, si los selects están en un formulario, el valor de lo seleccionado lo recibirías en php mediante $_POST o $_GET, según el método que indiques en tu formulario, al igual que cualquier otro campo de tu formulario. Si necesitas obtener estos valores en javascript, es otra historia, necesitas accederlos por nombre o id del select.

unexes · #8 (**permalink**) 09/08/2012, 15:22

ocp001a

Lamento las molestias que te estas tomando y de nuevo te doy las gracias por tu paciencia.

Veras como lo hice con un tutorial me he perdido en el código, los selects están en el formulario llamado form1 de la página principal, pero como la página principal.php llama a otras 2 páginas para recargar los selects (Provincias.php y Poblaciones.php) es ahi donde me pierdo y no se como recuperar los valores. En otras páginas donde tengo varios selects independientes para realizar busquedas, saco el valor de lo seleccionado en el mismo sin problemas incluso paso por GET dichos valores a otrás páginas, pero aqui de verdad estoy perdido, he intentado hacerlo de la misma manera pero no encuentro la forma.

Abusando de tu amabilidad, mira si ves como hacerlo con el código que he puesto al principio, si puedes ayudarme te lo agradeceria.

Un saludo.

ocp001a · #9 (**permalink**) 10/08/2012, 12:33

Te ocurre lo mismo que a mucha gente que no comprende el flujo de datos del navegador y de php.

Primero creas un formulario con un o más select, éste es tu contenido original, luego con ajax llamas contenido html para colocar o sustituir los select 2 y 3, pero estos ya no pertenecen al formulario, son un parche sobrepuesto.

Para lograr lo que quieres deberías crear los 3 slect al inicio (2 y 3 vacíos) y mediante ajax retornar una llamada javascript que modifique las opciones de los select 2 y 3.

Otra opción sería manejar campos ocultos desde que creas el formulario, que al cambiar los select 2 y 3 copien el valor a los ocultos, aunque esta solución es algo chapucera, te puede servir.

Por cierto, la forma que manejo en el aporte que postee, usa la primer forma que te comento.

unexes · #10 (**permalink**) 11/08/2012, 01:02

Gracias ocp001a.

Aunque no tengo ni idea por donde empezar porque estoy totalmente perdido voy a seguir intentandolo.

Gracias por tu ayuda.

unexes · #11 (**permalink**) 17/09/2012, 04:11

Bueno compañeros lo he intentado solucionar por mi mismo durante algo mas de un mes y no lo he conseguido, hay cientos de paginas en la red sobre este tema pero no he encontrado ninguna que me diga de una forma clara (para que yo lo pueda entender), como sacar los valores que se han seleccionado en cada uno de los diferentes selects para luego utilizarlos en otra consulta, aclaro que el rellenado de los selects dependientes en funcion a lo que se selecciona en cada uno de ellos funciona perfectamente.

El problema es que no poseo los suficientes conocimientos en este terreno para entender a los compañeros que ya me han intentado ayudar y a los cuales les estoy muy agradecido.

Así pues como ultimo recurso solicito que si alguien es tan amable para decirme que código debo poner y donde lo debo poner para que en la página "Principal.php" donde se encuentran los 3 selects dependientes obtenga 3 variables cada una de ellas con el valor seleccionado en cada select.

Gracias por vuestra ayuda, un saludo.

PD: En el código que se encuentra al principio solicito 3 cosas olvidaros de ellas solo necesito solucionar la primera que es la que expongo en esta auto-respuesta.

jossss · #12 (**permalink**) 17/09/2012, 06:39

Pues si funcionan perfectamente los select dependientes, en el momento en que envías el form ya tienes las tres variables que se envían con el formulario.
El problema es que un formulario debe estar dentro de las estiquetas
<form action='paginadestino.php' method='post'>
Tus select.
Tu submit
</form>
Dependiendo del metodo de envío, recogerás las variables con $_GET['nombre del campo'] o $_POST['nombre del campo'].
Pero vamos, lo primero es básico HTML y lo segundo es básico PHP.
En vez de intentar solucionar este problema con el que llevas mes y medio podrías empezar con aprender lo básico de HTML y luego lo básico de PHP y no tener prisa en hacer estos proyectos que todo lleva su tiempo.

unexes · #13 (**permalink**) 19/09/2012, 04:34

Gracias por tu ayuda.

He puesto al principio el código y que lo hice de un tutorial (porque no se PHP ni HTML) y parece ser que todos saben como sacar lo seleccionado en los selects y pasarlos a 3 distintas variables para luego poder utilizar dichos valores en otra consulta, todos lo saben menos yo.

Lo de aprovechar el tiempo en aprender PHP y HTML en su forma basica, me encantaria, pero yo no me dedico a hacer webs ni a programar en PHP, HTML, AJAX, y un largo etc..., (ya tengo bastante con mantener mis conocimientos al día en la rama de mi trabajo), estoy solamente haciendome mi propia página por cuestiones economicas y aprovecho para aprender y tener unos pequeños conocimientos sobre la programación de webs en general que siempre es bueno porque el saber no ocupa lugar. Aunque algunas veces los conocimientos que preciso están fuera de los mios y me quedo atascado.

Menos mal que no he pedido en un foro sobre medicina que me indiquen como curarme un pequeño corte y que me aconsejen que debo ponerme y como debo ponermelo, porque me arriesgo a que me digan que en lugar de buscar la forma de curarme, que aproveche el tiempo y aprenda medicina, bueno siempre queda la posibilidad de ir a urgencias.

Código:

Dependiendo del metodo de envío, recogerás las variables con $_GET['nombre del campo'] o $_POST['nombre del campo'

Con relación al código anterior eso ya lo sabia, mi problema es que es que a pesar de vuestras esplicaciones me he quedado atascado y NO SE HACERLO.

Bueno gracias a todos y si no me dice nadie que es lo que debo poner y donde , dare por cerrado este tema.

Un saludo y que nadie se moleste cada uno es experto en su trabajo o en la funcion que desempeña.