Combos (Combobox) Dependientes Utilizando PHP, Mysql y jQuery (Javascript)

Noviembre 30th, 2008 | por jjeb™ |

La idea es generar una relación entre 3 combos, en este caso utilizaremos país -> estado ->  ciudad.

Para esto utilizaremos javascript  (jquery), PHP y Mysql. Iniciaremos con la estructura de la base de datos para ellos necesitaremos 3 tablas, que son las siguientes:

País:

CREATE TABLE `pais` (
`idpais` int(10) unsigned NOT NULL auto_increment,
`pais` varchar(50) default NULL,
PRIMARY KEY USING BTREE (`idpais`)
) ENGINE=MyISAM;

Estado:

CREATE TABLE `estado` (
`idestado` int(10) unsigned NOT NULL auto_increment,
`estado` varchar(50) default NULL,
`pais` int(11) NOT NULL default '0',
PRIMARY KEY USING BTREE (`idestado`)
) ENGINE=MyISAM;

Ciudad:

CREATE TABLE `ciudad` (
`idciudad` int(10) unsigned NOT NULL auto_increment,
`ciudad` varchar(50) NOT NULL default ”,
`estado` int(11) NOT NULL default '0',
`pais` int(10) unsigned NOT NULL default '0',
PRIMARY KEY USING BTREE (`idciudad`)
) ENGINE=MyISAM;

Los combos sera algo asi:

<select id="pais" name="pais">
	<option selected="selected" value="0">---------</option>
<option value="&lt;?=$rs[">"&gt;</option>
 
</select>
<div>
<select id="estado" name="estado">
	<option selected="selected" value="0">----------------</option>
</select></div>
<div>
<select id="ciudad" name="ciudad">
	<option selected="selected" value="0">-------------------</option>
</select></div>

Nuestro código en javascript será el siguiente:

$(document).ready(function(){
	$("select").change(function(){
		// Vector para saber cuál es el siguiente combo a llenar
		var combos = new Array();
		combos['pais'] = "estado";
		combos['estado'] = "ciudad";
		// Tomo el nombre del combo al que se le a dado el clic por ejemplo: país
		posicion = $(this).attr("name");
		// Tomo el valor de la opción seleccionada
		valor = $(this).val()
		// Evaluó  que si es país y el valor es 0, vacié los combos de estado y ciudad
		if(posicion == 'pais' &amp; valor==0){
			$("#estado").html('	----------------')
			$("#ciudad").html('	----------------')
		}else{
		/* En caso contrario agregado el letreo de cargando a el combo siguiente
		Ejemplo: Si seleccione país voy a tener que el siguiente según mi vector combos es: estado  por qué  combos [país] = estado
			*/
			$("#"+combos[posicion]).html('Cargando...')
			/* Verificamos si el valor seleccionado es diferente de 0 y si el combo es diferente de ciudad, esto porque no tendría caso hacer la consulta a ciudad porque no existe un combo dependiente de este */
			if(valor!="0" || posicion !='ciudad'){
			// Llamamos a pagina de combos.php donde ejecuto las consultas para llenar los combos
				$.post("combos.php",{
									combo:$(this).attr("name"), // Nombre del combo
									id:$(this).val() // Valor seleccionado
									},function(data){
													$("#"+combos[posicion]).html(data);	//Tomo el resultado de pagina e inserto los datos en el combo indicado
													})
			}
		}
	})
})

Muy bien hasta este momento tenemos las dependencias es decir que combo carga a el siguiente, ahora necesitamos la página donde tendremos información que asignaremos en estos.

combos.php

'.htmlentities($rs["estado"]).'';
	break;
	}
	case "estado":{
		$res = mysql_query("SELECT idciudad,ciudad FROM ciudad WHERE estado= $idcombo order by ciudad ASC");
		while($rs = mysql_fetch_array($res))
			echo ''.htmlentities($rs["ciudad"]).'';
	break;
	}
}
?&gt;

La mayor parte del código viene en su mayoría comentado por lo que no me parece necesario explicarlo.

Ejemplo | Descargar

Etiquetas: , , ,

  1. 29 Respuestas en “Combos (Combobox) Dependientes Utilizando PHP, Mysql y jQuery (Javascript)”

  2. Por Benjamin, Dic 16, 2008 | Responder

    Hola Juan, soy muy nuevo en esto de Ajax y tu ejemplo me sirvio muchisimo para comprender un poco mas.

    Mi pregunta es: ¿Como mandar los valores mediante un Submit?. Se que deben de tomarse los valores del ultimo select y este por ende nos dara los datos que tomar, pero, no afecta al script si coloco el boton?

    De nuevo, muy buen tutorial. Felicidades por el blog!

  3. Por jjeb™, Dic 18, 2008 | Responder

    @benjamin para enviar el formulario, solo coloca el botón y el destino en el formulario y si toma los valores que se encuentren seleccionados.

    Gracias por visitar el blog, si necesitas mas ayuda puedes agregarme al Messenger o al gtalk en la cuenta juanj.esparza(a)gmail.com

  4. Por Alexander, Ene 18, 2009 | Responder

    Excelente trabajo lo de los combos, muy bien documentado el código.

    Gracias.

  5. Por SONIX, Feb 11, 2009 | Responder

    Hola Que buen articulo
    Sirve mucho.

    Quisiera colocar dos(2) de estas mismas seleciones en un mismo formulario pero no me funciona. la primera funciona de maravilla y la segunda solo carga los paises, pero los siguientes dos combos no……..AYUDA GRACIAS

  6. Por Felipe, Feb 27, 2009 | Responder

    Hola!
    hey gracias por el codigo me ayudo ene :D !!
    Saludos y sigan asi ;)

    Bye bye

  7. Por Carlos Amaya, Mar 23, 2009 | Responder

    Saludos ciertamente, cuando cambias los datos del pais (si pones otro pais y otros estados etc) no refrescas los combos de abajo, de hecho cuando cae ‘estado’, ciudad no se carga automaticamente….y el jquery.js esta muyyy engorroso para decifrarlo…ayuda porfa…

  8. Por Carlos Amaya, Mar 23, 2009 | Responder

    este funciona mejor para mas de 3 combos: http://www.ashleyit.com/rs/jsrs/select/php/select.php

    pero cuesta mas montarlo, conmucha paciencia se puede, ya yo lo hice..saludos….este no sirve para mas de 3 combox….no refresca los demas boxes cuando uno cambia, el que les likie si funciona, saludos

  9. Por Ivan Leon, Mar 23, 2009 | Responder

    Hola amigo mio , he bajado tu codigo lo he probado en mi servidor , incluso con las mismas tablas que ofreces y no logro hacerlo funcionar….podria contactarme contigo para ver sipuedes darme algunos tips……mil gracias por adelantado

  10. Por Luis, Mar 28, 2009 | Responder

    Hola estube checando tu codigo es muy bueno, yo apenas estoy comenzando con mysql pero tengo una duda para los selects: suponiendo que ya escogimos pais y estado, como puedo hacer para que al momento de escoger ciudad me envie en automatico a un documento nuevo? como le pongo el link en la tabla de mysql o donde y si es en la tabla como seria la sintaxis?

    y de antemano gracias por compartir y enseñarnos un poco.

    suerte!

  11. Por Pablo Escobar, Abr 1, 2009 | Responder

    muy buen codigo pero tengo una pregunta y es parecida a esta ultima, como hago para enviar la informacion del ultimo select? si quisiera yo implemantarlo en algun formulario o simplemente realizar una busqueda, deveria tener alguna accion mas aparte de solo aparecer los datos

  12. Por geovanny, Abr 16, 2009 | Responder

    hola a atodos una pregunta. Si cambio los datos de los campos y tablas de los archivos.php funciona, es decir el archivo java funciona con otras bds y dos tablas

  13. Por ernesto piedra, May 18, 2009 | Responder

    hola es buenisimo tu ejemplo pero tengo un problema, aqui en tu pagina ese ejmplo corre en mozilla como en Internet Explorer, pero al momento de hacerlo en mi maquina, con las mismas tablas no me corre en IE por favor ayudeme es urgente

  14. Por jjeb™, May 18, 2009 | Responder

    juanj.esparza@gmail.com agregame (msn o talk) y lo revisamos ..

  15. Por Manolo, May 19, 2009 | Responder

    Hola a todos.
    Muy buen código desde luego.
    Lo que yo estoy buscando es poder hacer ilimitadas relaciones entre selects diferentes y que unos dependan de otros. Se podría adaptar este script?.
    Gracias

  16. Por jjeb™, May 19, 2009 | Responder

    Si.. es cuestión de trabajarlo un poco..

  17. Por roberto, Jun 4, 2009 | Responder

    holas ….baje el ejemplo y lo use sin broncas…pero cuando sustituyo por otras tablas respetando tu codigo…ya no funciona el 2do y 3er combo!!!…..me puedes ayudar????

  18. Por Kelly Brown, Jun 12, 2009 | Responder

    The best information i have found exactly here. Keep going Thank you

  19. Por Jesuskaoz, Jul 1, 2009 | Responder

    Muchas gracias :D me sirvio mucho tu ejemplo

    un saludo y agradecimientos =)

  20. Por KonstantinMiller, Jul 6, 2009 | Responder

    Hello. I think the article is really interesting. I am even interested in reading more. How soon will you update your blog?

  21. Por fran, Ago 3, 2009 | Responder

    Estimado Juan!
    Me he bajado tu codigo, y no me esta trabajando :S , de todo lo que he leido en la web y buscado, tu ejemplo me parece el + entendible de todos, pero no me esta funcionando, en el combo box de pais como segunda opción me esta apareciendo debajo de los guiones ( —- ) una opción que es ( “> ) . Imagino que tendra algo que ver con el code que esta dentro de <option value="”>. De Jquery la verdad conozco muy poco. He leido bastante pero no doy con el porque o con el error. Espero me puedas ayudar. muchas graciaas!!! Excelente blog! Exitos!

  22. Por Mario Manotas Duran, Ago 4, 2009 | Responder

    Excelente codigo, me funciono correctamente y lo hice para que funcionara con 4 combo box.

  23. Por Juan Sebastián Rodríguez Isáziga, Ago 16, 2009 | Responder

    maestro,

    muchas gracias por este super script, lo estuve buscando muchísimo y gracias a tu aporte voy a poder terminar un proyecto, gracias de verdad MAESTRO

    //Juan Sebastián
    Bogotá, Colombia

  24. Por erufenix, Sep 25, 2009 | Responder

    Hasta que encontré un buen ejemplo de como hacer esto con jquery ¡Felicitaciones! me sirvió mucho tu ejemplo

  25. Por xavier, Nov 15, 2009 | Responder

    me pasa lo mismo ke a fran, en la opcion de pais solo me sale >”
    como solucionar eso?

  26. Por mike, Ene 12, 2010 | Responder

    Hola esta muy bien explicado tu codigo pero resulta que yo lo estouy intentando utilizar, obviamente uso mi conexion a mi base de datos y cargo los datos tal cual, pero no me despliega nada en el primer combo. sera que este la configuracion de mi seridor

  27. Por mike, Ene 12, 2010 | Responder

    Hola de new, tengo una dificultad resulta que en mi formulario principal genero un id, y este mismo id lo quiero enviar a mas formularios pero no tengo idea de como hacerlo alguien me podria ayudar lo que tengo en mente es lo siguente: a href=”../formulario2.php?id=

  28. Por Grufe, Ene 30, 2010 | Responder

    Hola a amigos de cada parte del mundo que integran este maravillos FORO…

    Hosnetamente y con toda sinceridad, nuy bueno el codigo de Jjeb, buena explicacion y didactica, a pesar que soy novato en PHP, se deja entender.

    Amigo Jjeb, podrias por favor, ayudarme con la siguiente consulta:

    Tengo CUATRO tablas:

    CENTRO DE SALUD, CLINICA; ESPECILIDAD; MEDICOS

    CEN_SALUD01
    CLINICA01
    CLINICA02
    CCLINICA03

    CEN_SALUD02
    CLINICA01
    CLINICA02
    CLINICA03
    ESPECILIDAD
    ESPECI01
    ESPECI02
    ESPECI03

    Lo que deseo, es que, cuando yo elija en el COMBO1 un CENTRO DE SALUD, me debe de mostrar las clinicas que pertenecen a ese CENTRO DE SALUD en el COMBO2, cuando yo seleccione clinica en el COMBO2, me debe de mostrar las especialdades que existen en esa clinica en el COMBO3.

    Al mostrarme las especialidade en el combo3, tendra que listarse en una grilla todo los mediocs que pertenescan O trabajen a la clinica selecionada, y hacer un conteo en la parte inferior de ña grilla; de los medicos que existen la clinica y totalizarlos a todos los que pertenezcan al CENTRO DE SALUD.

    Agradeciendote por tu atencion y a tu ayuda Jjeb, te pido tu apoyo. Por favor te dejo mi correo para poder comunicarnos.

    rfloresenator@gmail.com

    Atte.
    Grufe.
    Lima – Peru.

  29. Por Fil, Feb 23, 2010 | Responder

    Gracias por tu codigo me facilito mucho el trabajo aunque lo modifique tengo una sola tabla que baje del inegi en donde en una misma tabla viene pais, estado, municipio, localidad y codigos postales y no necesite crear tablas independientes ni indices, si alguien se interesa por el codigo mandenme un mail y yo se lo mando ok! gracias…

  30. Por Fil, Feb 27, 2010 | Responder

    muy bueno tu ejemplo, censillo y facil de trabajar muchas gracias!!!

Publica un Comentario