Muchas 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= ' Option1 Option2 Option3 '; echo $rpta; |
Puedes ver la demo AQUI
[social-download button_id=»8ec915b141ed2f904″ dl_id=»http://www.miguelmanchego.com/wp-content/uploads/2009/01/combos_dependientes.zip» theme=»blue» message=»Comparte este post para descargar los archivos del ejemplo» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
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
Hola soy aprendiz en este tema, gracias por compartir. Mi consulta es: para rescatar el ultimo valor «ciudad» en el campo pero en forma de texto modificable y no asi como select, que cambios debo efectuar en index.php? y en las funciones?
Gracias.
hay algun correo donde te pueda escribir para enviarte mi codigo. yo tengo tres combobox dependientes uno del otro y me funcionan bien el problema es que solo los puedo usar para agregar registros nuevos. cuando intento usarlos en una pagina de busqueda que me trae el valor capturado previamente en esos tres campos. no me trae los valores previamente capturados en esos tres campos pero si puedo ver los valores de lista de los tres combobox.
Imagino que la búsqueda usa GET. haz que se capturen esos valores usando PHP o el lenguaje que utilices en el servidor y luego una condición para ver si el ID enviado coincide con alguno de los valores del combo y añadirle el atributo selected según corresponda.
No puedo descargar la demo :/ :O
Con éste código puedo hacer que el 3er combo sea hijo también del primer combo?
lo que pasa es que para mi proyecto, el primer combo sería «estado» el segundo colonia origen y el tercero colonia destino, pero el 2do y el 3ero dependen del 1ero.
Si se puede, basta que el evento change del primer combo borre el contenido del tercero y lo llene añadiendo un par de líneas
Acabo de borrar el cache, veo que ya funciona el link de descarga
como mando los valores de los tres selects a una base de datos?
Tal como enviarias cualquier combo normal. Si aún no sabes como hacer eso busca información sobre PHP y el comando mysqli
Te envie un mensaje a tu pagina de facebook, no puedo poner aqui mi duda me marca error 🙁
espero y puedas ayudarme de verdad, he pasado por mucho para lograr primero que funcione el combobox, y ahora que logre que funcionara, no se como llamarlo a la base de datos, soy un programador mas que novato, pero tengo esta practica que me esta quebrando la cabeza y sinceramente no tengo idea de como solucionarla, espero y puedas checar el mensaje en tu facebook, saludos y cualquier cosa estoy a tus ordenes
¿Exactamente a que te refieres con llamarlo a la base de datos? Si te refieres a grabar la información es igual que cualquier combo normal. Si quieres recoger el valor guardado es un poco más complicado debes capturar los valores, luego una función foreach y un if para detectar si esta ese valor y en ese caso añadir un selected
me refiero a recoger el valor, es decir, que tabla tengo que tener?
o tendria que manejar solo 1 campo?
por ejemplo yo tengo un formulario
supon:
nombre:
correo:
empresa:
tipo_fallo (este es donde coloque el combobox y esta dividido en tres niveles)
observaciones
enviar
entonces mi duda es…. tengo mi tabla «Reporte» donde tiene los campos
id, nombre, correo, empresa, tipo fallo, observaciones…
esta bien esto?
o como seria?
La forma más sencilla es un campo por cada combo y si quieres algo más complejo en un sólo campo concatenas los valores
rayos… me podrias pasar un ejemplo de una base de datos donde venga el uso de este combobox exacto?
porfavor :(?
No se puede descargar el demo.
Saludos
Lástima, esta bueno el tutorial. Sigo buscando en la red.
En caso no te funcione lo de compartir, vas a la página demo y le das a descargar igual funciona
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.
implemente tu codigo, funciona bien pero si juegas harto rato con las opciones se lagea (se pegua la pagina) al refrescarse muy seguido al ir cambiando de opcioón, sabes como se podria mejorar eso? o si alguien le pasó lo mismo y lo soluciono
Muy bueno tu codigo pero no encuentro la manera de utilizarlo con registros de una base de datos me podrías ayudar por favor gracias de antemano
como descargo el tutorial
como descargo el demo