El ejemplo está dividio en cuatro archivos:
El archivo conexion para conectarnos a la base de datos.
conexion.php
<?php
function conexion(){
$con = mysql_connect("localhost","root","");
if (!$con){
die('Could not connect: ' . mysql_error());
}
mysql_select_db("database", $con);
return($con);
}
?>
Este archivo es la vista al usuario. Contiene el primer select donde cargamos en él los continentes almacenados en la base de datos. Tiene como atributo el evento onchange de JavaScript el cual ejecuta la funcion ajax load() cada vez que se hace clic sobre una opcion (continente).
index.php
<?php
include 'conexion.php';
?>
<!DOCTYPE html>
<html>
<head>
<script src="ajax.js"></script>
</head>
<body>
<h2>HTML - PHP - AJAX - MySQL</h2>
<?php
$con=conexion();
$res=mysql_query("select * from continente",$con);
?>
<select id="cont" onchange="load(this.value)">
<option value="">Seleccione</option>
<?php
while($fila=mysql_fetch_array($res)){
?>
<option value="<?php echo $fila[codigo]; ?>"><?php echo $fila[nombre]; ?></option>
<?php } ?>
</select>
<div id="myDiv"></div>
</body>
</html>
include 'conexion.php';
?>
<!DOCTYPE html>
<html>
<head>
<script src="ajax.js"></script>
</head>
<body>
<h2>HTML - PHP - AJAX - MySQL</h2>
<?php
$con=conexion();
$res=mysql_query("select * from continente",$con);
?>
<select id="cont" onchange="load(this.value)">
<option value="">Seleccione</option>
<?php
while($fila=mysql_fetch_array($res)){
?>
<option value="<?php echo $fila[codigo]; ?>"><?php echo $fila[nombre]; ?></option>
<?php } ?>
</select>
<div id="myDiv"></div>
</body>
</html>
El archivo ajax.js es un archivo javascript el cual contiene la funcion load(), esta cáptura el código del continente seleccionado y se lo envía al archivo proc.php a través de la variable q y con el método post para que lo procese.
ajax.js
function load(str)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","proc.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+str);
}
Finalmente este archivo captura el código del continente para hacer una consulta a la base de datos y mostrar en otro select los paises del continente seleccionado. El resultado se visualiza en el div con id igual a myDiv ubicado en el archivo index.php
proc.js
<?php
include 'conexion.php';
$q=$_POST['q'];
$con=conexion();
$res=mysql_query("select * from pais where cod_cont=".$q."",$con);
?>
<select>
<?php while($fila=mysql_fetch_array($res)){ ?>
<option><?php echo $fila[nombre]; ?></option>
<?php } ?>
</select>
Demo/Código fuente
Esta muy bueno, gracias.
ResponderBorrarUna duda, que pasa si necesito que el segundo haga lo mismo con un tercer y ultimo Select?
Es realmente claro y muy útil, pero ahora me enfrento al problema de cargar, mediante este último select otro select y resulta que no carga scripts en la página cargada (la proc.php). Cargo los scripts en el archivo principal y si me funcionan pero no en el Internet Explorer, diantres!!1
ResponderBorrarYo tengo la misma duda y el mismo problema que ustedes quiero cargar un tercer select mediante el segundo, ademas como obtengo el valor de cada uno?? si este se carga en un div con un id y no con un name para poder mandar los datos mediante post o get
ResponderBorrarEl código con tres selects se puede descargar de aqui:
ResponderBorrarhttps://github.com/jerrycode/selectajax
Gracias Jerry, 8 años después, tu ayuda sigue dando frutos...
Borrarbuenas les agradezco ayuda....yo tengo 2select pero necesito imprimir un datos que depende de la opción seleccionada del 2do. select
ResponderBorrarSaludos Jerry. Yo tengo algo como lo que has descrito arriba pero necesito guardar los datos seleccionados en una base de datos.
ResponderBorrarLa primera lista muestra las provincias y la segunda lista muestra las localidaddes de la provincia seleccionada.
Ambas forman parte de un formulario para registrar un nuevo contacto y quiero guardar la opción seleccionada de ambas listas en una base de datos.
Si puedes ponerte en contacto conmigo pino_bx88@hotmail.com y ya te pasaría el código para que lo veas tú mismo.
Un saludo y muchas gracias
se nombra como titulo proc.js y debería llamarse proc.php, por lo menos así está en los archivos de ejemplo, muchas gracias por su aporte.
ResponderBorrarsaludos.
Yo tengo un problema, tengo los mismos archivos pero en diferentes carpetas y no funciona. Al ponerlos todos en el mismo lugar si me funciona, pero necesito aplicar arquitectura. Como podria hacer para arreglar este problema y dejarlos en diferentes carpetas funcionando.
ResponderBorrarLo que yo necesito es que envés de que me cargue en otro combobox necesito que me cargue en una tabla de mi formulario; los valores relacionados con el combobox seleccionado..
ResponderBorrarSi alguien me puede ayudar o conoce una fuente.... por favor ayuda....
Como guardo los datos del 2do o 3er combo a la BD... como esta en el div intente pero no le leyo.... cuando le agregue un name a los selects de los divs de los otros archivos igual
ResponderBorrarTengo varios select dependientes en un fromulario, las funciones ajax funcionan correctamente, el problema se presenta a la hora de enviar el formulario para que los datos se guarden en la BD. No se envia el valor de los select, aun teniendo asignados en valor id y name. Si alguien pudiera ayudar se lo agradezco mucho.
ResponderBorrarMe paso lo mismo que Anonimo =S no puedo insertar, porque los datos del div no lo manda en el form =S
ResponderBorrarLo pudiste resolver?
BorrarEste comentario ha sido eliminado por el autor.
ResponderBorrarOye ¡¡¡Gracias!!! utilicé el código para tres select y funcionó sin problemas, fácil de entender y de modificar, uffff me salvaron la vida
ResponderBorrarGracias por su libre contribución al conocimiento :)
Gracias jerry, me sacaste de un apuro, muy bien explicado :D
ResponderBorrarMuchas gracias Jerry, fue de gran ayuda, solo que ahora no veo como recoger los valores seleccionados para guardarlos en la BD, ya que al parecer estan fuera del alcance, me podrías ayudar?
ResponderBorrarLo pudiste resolver?
BorrarTengo el mismo problema! como tomo el value de los select?? Gracias!
ResponderBorrarEste comentario ha sido eliminado por el autor.
ResponderBorrar¡¡¡RESUELTO!!!
ResponderBorrarEstimados con un colega lo resolvimos de la siguiente forma:
proc.php
al select además del id le seteamos la propiedad "name" con el mismo atributo que el "id" es decir:
select id="pais" name="pais"
y en el index.php le pusimos el mismo nombre al div y agregamos el select para que aparezca desde el principio, quedando de la siguiente manera:
< d iv id="pais"> < !--div donde aparecen los paises-->
< s elect name="pais">
< o ption value="">Seleccione
(No olviden en la función de ajax arriba del index, cambiar el nombre "myDiv" por "pais" sino no les va a llamar al div por el onchange del otro select es decir:
document.getElementById("pais").innerHTML=xmlhttp.responseText;)
Luego para tomar los valores y persistir en la BD desde otro .php usamos la siguiente linea:
$pais = $_REQUEST['pais'];
Espero que les sirva, a nosotros nos funcionó.
Saludos.
Crii serias tan hamable de enviar el codigo completo para revisarlo estoy apretando en esa seccion y lo necesito urgente te lo agradeceria mi correo es e.j.l.r@hotmail.com
BorrarCrii ya lo hice y no me funciona serias tan amable de ayudarnos, no me funciono no me carga el select pais si hago esos pasos pordrias mostrar como lo hace y ayudarnos.
BorrarMe ha servido demasiado, mira que estuve batallando bastante para guardar los datos, casualmente llegue a tu comentario, aplique lo que mencionas y funciono a la perfección, GRACIAS!.
BorrarMe ha servido demasiado, mira que estuve batallando bastante para guardar los datos, casualmente llegue a tu comentario, aplique lo que mencionas y funciono a la perfección, GRACIAS!.
BorrarDe que manera puedo enviar los datos a traves de un formulario, el proceso con ajax , con el div.. no envia los datos del formulario para que puedan ser validados ... ????? como puedo asiganarle un name .. para que lo reconosca!!
BorrarMe podrías mandar los archivos completos de la forma que a ti te funcionó ... yo lo intenté de mil maneras pero no obtuve un resultado aceptable
Borrarjimmy_eduardo_@hotmail.com
BorrarMuy buena resolución, funciona excelente en mi aplicación.
BorrarExecelente, gran aporte. Funciona muy bien.
Borraralguien pudo mandar el div en el form
BorrarGracias camarada, se ve que el que hizo el post es un tonto que ni prueba lo sube pero tu si eres chingon Crii
Borrarsi alguno lo tiene me lo pasa? me muestra el select de entrada pero lo manda en blanco - davidgrippo95@gmail.com-
BorrarHola esta muy bueno el ejemplo, Funciona bien pero necesito insertar los datos en mi DB y no lo he logrado. Hice esto pero nada:
ResponderBorrarCrii ya hice todo como dices pero no entendi muy bien lo del $pais = $_REQUEST['pais']; es decir "pais " ¿es la variable? ¿se debe definir la variable asi antes de enviar los datos?
ResponderBorrarMuchísimas Gracias me sirvió de mucha ayuda gracias EXELENTE código y fácil de entender !!!!
ResponderBorrarMuy bueno, me costo encontrar algo así y que fuese mas entendible. Hay algunos errores o detalles en el código para programadores novatos como yo, hay que agregar algunos (') apostrofes por allí y listo.
ResponderBorrarTe pasaste lo mejor que pude encontrar en la web respecto de este tema, mil gracias
ResponderBorrarque codigo mas malo !!
ResponderBorrarMe sirvió el código para llenar los combos pero no lo puedo guardar en la base de datos.
ResponderBorrarAmigo muy bueno el codigo de 3 select, pero tengo problemas para el de dos select el link creo que esta caido despues de addfly no carga nada más..
ResponderBorrardonde coloco el $pais = $_REQUEST['pais'];
ResponderBorrarExcelente aporte.
ResponderBorrarTengo una duda, Si quisiera enviar más variables por aquí:
ResponderBorrarxmlhttp.send("q="+str);
¿Cómo se haría?
muy buen aporte, yo ya pude cargar un select anidado, el problema que tengo es que en la misma pagina necesito cargar un segundo select anidado totalmente aparte de los dos primero, pero al registrar en la pagina el segundo archivo .js , el primero me deja de funcionar
ResponderBorrarpor favor si tienes alguna sugerencia te gradezco mi correo es wilsonsistem@hotmail.com
Muy buen aporte me esta sirviendo de mucho pero
ResponderBorrarAlguien me puede decir como hacer para que en vez de colocarlo en un div lo coloque en un input text
Hola! yo tengo el mismo problema que el ultimo An ónimo que posteo, tengo 4 select que depende de otros 4 select totalmente aislados, es decir, cada select depende de otro select. El tema es que al cambiar cualquier linea de la funcion load, esta no funciona o bien trabaja unicamente con el primer select. Espero encontrar la solución. Gracias
ResponderBorrarGenial ...
ResponderBorrarEste comentario ha sido eliminado por el autor.
ResponderBorrarfunciona el codigo para 3 select?..por mas que lo pongo y reviso.....no me funciona...a alguien le ha funcionado?
ResponderBorrargracias de de antemano
buen aporte, así queda
ResponderBorrar< s elect name="pais">
< o ption value="">Seleccione
Muy bueno, llevaba mucho tiempo buscando eso, muchas gracias muy buen aporte
ResponderBorrarMuy buen aporte gracias, de pronto alguien podría explicarme como puedo obtener el valor del segundo select que sale de proc.php, y desde el index.php capturar todos los valores y guardarlos en mysql
ResponderBorrar