Combos dependientes AJAX
Categories: AJAX, PHP - Tags: AJAX, combos, dependiente, PHPMuchas veces necesitamos crear combos que se llenen según lo que elegimos en otro combo, por ejemplo si tenemos un combo paises queremos que cuando se elija un país, otro combo se llene con las ciudades o estados.
Seguramente haz visto otros tutoriales y ejemplos pero estos son muy dificiles de modificar a lo que tu deseas, asi que he decidio implementar estos combos dependientes con jquery y con 2 archivos php llamados combo1.php y combo2.php, donde puedes modificar facilmente lo que desees que haga el combo.
Crear los combos dependientes
Veamos primero el codigo html que vamos a usar para este ejemplo
1 2 3 4 5 6 7 8 9 |
Ojo: puedes cambia el nombre de los combobox al que desees pero no modifiques el ID
Implementando la función JQuery
Voy a postear el codigo unicamente para el primer combo, ya que el segundo es practicamente igual (si deseas ver el codigo completo basta que descargues el ejemplo)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function(){ // Creamos el evento change para detectar el elemento elegido $("#combo1").change(function () { $("#combo1 option:selected").each(function () { // capturamos el valor elegido elegido=$(this).val(); // Llamamos al archivo combo1.php $.post("combo1.php", { elegido: elegido }, function(data){ // Asignamos las nuevas opciones para el combo2 $("#combo2").html(data); // reseteamos el combo3 $("#combo3").html(""); }); }); }) }); |
Modificando las opciones mostradas
Si descargas el ejemplo veras que hay 2 archivos: combo1.php y combo2.php los cuales contiene un echo que segun el valor enviado imprime el contenido del combo2 y combo3 respectivamente. Si quisieras hacer que invoquen una base de datos simplemente pega tu codigo de conexión con un bucle que imprima el contenido del combo, es decir una cadena con los select.
1 2 3 4 5 6 | $rpta= ' <option value="op2_1">Option1</option> <option value="op2_2">Option2</option> <option value="op2_3">Option3</option> '; echo $rpta; |
Puedes descargar todo el codigo AQUI
Puedes ver la demo AQUI
Hola, buenas tardes, baje tu código de ejemplo pero no me funciona, el error que tiene es que $_POST["elegido"] no tiene ningún valor. Como le hago para que me enví el valor de la opcion seleccionada?
De antemano gracias por tu atención y por el código. Saludos!!
Hola
Si revisas el codigo, en esta linea:
elegido=$(this).val();
Es donde recojo el valor del combo.
La variable $_POST["elegido"] unicamente existe dentro de combo1.php o en combo2.php.
¿O te refieres al momento de enviar el formulario?
Buenas noches Amigo…. primero que nada gracias por publicar esto me ha sido de mucha ayuda…. una pregunta estoy tratando de colocarle mas opciones al combo1, me la toma, es decir se ve pero el select del combo2 no tiene ningun valor…. Agradeceria toda la ayuda que pudieses aportar… Gracias de Antemano
Hola, funciona perfecto, y facilmente modificable, gracias.
No manches!!!!!!!!!!!!!!
De maravilla este ejemplo!!!! y mas por que lo compartiste!!!!!
es la primera vex que comento algo!! y la verdad esto esta GENIAL (AWESOME)!!!!
FELICIDADES Y MIL GRACIAS ME FUNCIONO DE MARAVILLA ya me habia cansado de buscar!!!
Hay muchas posibilidades, para saber que esta ocurriendo es necesario que verifiques usando la consola de firebug a ver si hay algun error javascript o PHP.
Hola
No entra a ejecutar el php
$.post(“combo1.php”, { elegido: elegido }, function(data){
Que puede ser ?
Saludos !!!
Podrían ser muchas cosas, es necesario que uses firebug y en la consola veas que error esta produciendo o cual es la respuesta del archivo PHP
Excelente tutorial. Lo encontré super sencillo y muy practico. Gracias por compartirlo. Cada vez me enamoro más del Jquery… jajaja
para introducirlo en otra página, sólo lo copio y pego tal cual esta en el eejemplo??
gracias.
Basicamente si, aunque yo recomiendo no andar copiando y pegando código, mínimo hay que entenderlo primero el código para que en caso surja algún error sepamos que es.
Hola, buen dia saludos. Excelente ayuda aunque tengo un problemilla , modifique el combo 3, es dinamico y el problema esta en que no puedo tomar el valor seleccionado. Lo necesito para luego usarlo en una sentencia sql.ya llevo rato en eso y nada. Por favor, ayuda.
si, gracias, de hecho si lo estuve leyendo. Aún no he podido llenarlo todo, y como que de repente me confunfundo por tantos nombres, pero Me has ayudado muchisimo, MIL GRACIAS
NO entiendo xq no puedes tomar el valor seleccionado enviando el formulario, suponiendo que se llame combo3 al ser enviado usando POST y colocarlo en SQL sería algo como SELECT * FROM mitabla WHERE alguncampo LIKE ‘.$_POST[combo3].’
Hola que tal, tengo problemas con tu variable “elegido”, no puedo leer su valor para poder hacer una consulta, porfavor ayudenme, estoy utilizando un framework para php que se llama codeigniter, por si tuviera algo que ver aunque no creo.
de ante mano gracias admin
Revisa el ámbito de la variable, pon un echo a ver si la reconoce
gracias miguel. Es cierto lo q decís, todos los ejemplos de otros sites no son genéricos. El ejemplo que preparaste es perfecto para readaptar de una forma sencilla a nuestros proyectos.
Un saludo y gracias nuevamente
Hola,
Gracias por el aporte lo utilize con ASP.NET MVC y funcionó espectacular.
Saludos.
!Clarito como el agua critalina!.
Muy bien explicado para novatos y muy facil de implementar.
Gracias
Hola Miguel. A mi no me funciona. Cuando selecciono el primer combo en el segundo sale una linea inmensa con todo el codigo del combo1.php. He probado el ejemplo que pones online y en Mozilla y IE funciona bien pero en Safari no.
ojo este ejemplo solo se puede probar en un servidor o el codigo PHP no se ejcutará osea algo como http://localhost/micarpeta y no simplemenete abriendo el archivo
Hola! Hay manera de que la llamada al archivo php para coger los datos para rellenar sea a un método de una clase y no a un archivo php? Si con Jquery no se puede, existe otra librería ajax para php para poder hacerlo?
Gracias!
Fue muy fácil integrarlo con cakephp. Muchas gracias.
Hola muy completo el select combo con ajax en realidad busque muchos que puedan ser modificables pero no hay. Si bien cumplen con la función del select a 3 niveles no son muy modificables.
Mira mi problema es que deseo q el combo2.php en la parte —-if ($_POST["elegido"]==”01″) {— además de validar el “elegido” del combo 2, deseo que compruebe también el valor del combo 1; esto porque el value del combo 2 se repite y debe ser asi te explico con un ejemplo:
Tengo 3 select: Departamento – Provincia – Distrito.
Sus value no son nombres son números 01,02,03,04 y por ejemplo si para el Departamento (combo1) Amazonas sería así
CHACHAPOYAS
Para provincia (combo2) sería
CHACHAPOYAS
Para distrito (combo3) sería
CHACHAPOYAS
Pero por ejemplo para el departamento ANCASH sería
ANCASH
Para provincia (combo2) sería
HUARAZ
……
Para distrito (combo3) DEBERÍA SER
HUARAZ
…… y los otros distritos pero jala el value=”01″ de ANCASH dado que el value que jala del combo 2 es 01.
Hay forma de que identifique tanto el combo 2 y el combo 1 seleccionado, su fuera así ya correria normal.
Espero que se haya podido entender te dejo el enlace http://www.joseolsson.com/test/
Gracias
Hola..
Muy bueno tu ejemplo Miguel pero me podrias ayudar con lo siguiente:
En un formulario con combos dependientes al momento de hacer submit los valores se me setean. Y lo q quiero es q no se borren los datos de los combos despues de hacer la consulta.
Gracias de antemano.
Para eso haz un envio usando ajax y no un submit http://www.miguelmanchego.com/2009/ajax-enviar-formularios-sin-recargar-jquery/
Hola, y como puedo hacer para enviar los valores de todos los selects a otra pagina, es decir. cuando mandas el formulario, ¿Cómo haces para que se envien incluso los select que estan en otras páginas y han sido cargados en el div?
Excelente ejemplo!!
Sencillo y fácil de adaptar, pero más que nada el concepto es con el que te sacaste un 10!!
Mil gracias por compartirlo.
Estimado Miguel, antes que nada una felicitación por tu blog, en verdad todos tus ejemplos son muy claros y funcionan.
El ejemplo que pones funciona, solo que al intentar recibir la variable por post no la trae, tengo mi archivo.php mismo donde intento recoger el id de combo1 pero no me trae nada $id = $_POST['cat_edo']; ojala puedas ayudarme.
no me funciona !!!
llevo todo el dia buscando esto
Hola, perdon soy demasiado novato en jquery, recien hoy y quiero que me corra este codigo porque lo necesito de verdad, pero copio el codigo tal cual esta pero no me salen los options del combo dos ni del tres. POR FAVOR AYUDA
Si alguien esta usando codeigniter y no puede capturar la variable por post, aunque a mi me funciona: $this->input->post(‘category_id’, true);
pero si no te funciona eso o el clasico POST, puedes enviar el valor por uri, solo lo concatenas en la vista:
$.post(CI.base_url+”sp/cs_enterprise/getSubcategories/”+category_id, { }, function(data){
de esa manera la recoges en el controlador:
$this->uri->segment(4); //o el nro q corresponda en vez de 4
Funciona muy bien es la manera mas limpia que vi estos combos dinamicos, felicidades buen trabajo y sencillo de integrar en cualquier lado. lol
Excelente aporte amigo me funcionó bien todo… hice las modificaciones y anda bien el script.
Cuando quieran colegas.
Excelente código, funciona perfecto…..ahora tengo un problema….yo necesito un combo más….copie lo mismo del segundo al tercero, para hacer el siguiente, en combo3.php hice mi código pero no lo muestra……se puede agregar un combo más o solo es para 3.
Gracias
Amiga Marissa, deberia funcionarte normalmente, por si acaso para verificar yo mismo lo probe.
MIRA MEJOR TE PONGO EL CODIGO:
// Parametros para el combo3
$(“#combo3″).change(function () {
$(“#combo3 option:selected”).each(function () {
//alert($(this).val());
elegido=$(this).val();
$.post(“combo3.php”, { elegido: elegido }, function(data){
$(“#combo4″).html(data);
});
});
})
==============================================
EL combo3.php :
<?php
$rpta="";
if ($_POST["elegido"]=="op3_1") {
$rpta= '
Option1
Option2
Option3
‘;
}
if ($_POST["elegido"]==”op3_2″) {
$rpta= ‘
Option41
Option42
Option43
‘;
}
echo $rpta;
?>
ahhh y por si acaso no te olvides colocar en tu HTML :
ESPERO TE SIRVA
Hola Miguel, me funciono excelente tu código de select dependientes.
Ahora quisiera saber como poder integrar una especie de Cargando, por ejemplo que diga en el mismo select : Antes de Seleccionar…………….. Diga Cargando………………
Es algo que me falta implementar…. y no es complicado reviza en la documentación de jquery las llamadas ajax, son unas 3 líneas de código que hacen lo que deseas
Miguel, estoy tratando de recoger los datos usando submit, solo necesitos 2 selects, el 3 ro lo he sacado. Las opciones de los selects las cargo mediante consultas mysql con un while. El problema es que me manda el primer valor del select y el segundo no…podrias ayudarme?
Hola, disculpa que no tenga preguntas por el código que das,
pero me gustaría saber una cosa, como haces que tu código se vea así al momento de postear?
es CSS??
o como lo trabajas?? me gustaría saberlo por que tenía un blog pero el código se veía asqueroso
Gracias
Cuando el llamado se hace desde un LightBox, no funciona. Imagino que es porque al momento del $(document).ready(function(){
aún no existe el COMBO que quiero leer posteriormente.
En ese caso cómo podría declarar eso dentro del propio lightbox??
Tu código está muy bueno y fácil de aplicar. Lo utilicé en cuatro combos dependientes obteniendo datos desde oracle y funciona perfectamente. Muchas Gracias!
Muy buen post, me fue de mucha utilidad, esta muy facil de entender.
lo utilice llenando combos con Mysql y sin problemas.
Gracias!!!
hola, muchas gracias por el tutorial, funciona bien, pero tengo un pequeño problema, lo quiero implementar en la pagina de contacto, para que las personas puedan elegir hacerca de lo que tienen dudas
por lo que la primera lista contiene los menus, y la segunda los servicios.
mi problema es que no puedo manejar las elecciones como variables, e intentado desde $_POST[combo1] hasta el simple echo y nada, ojala me puedas ayudar.
saludos y gracias de antemano