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

29 Jul 2008 Author: jjeb In: JavaScript, PHP, Programación, Recursos

Antes que nada, hola a todos este es mi primer post en el blog y espero no sea el ultimo porque desde hoy voy a colaborar aquí esperando que la información publicada sea de ayuda a todos.

Y pues empezamos, la idea es crear un script que al seleccionar el país nos muestre un combo con los estados de este y al seleccionar un estado nos muestre las ciudades del estado, aquí un ejemplo:

Ejemplo

Esto utilizando Jquery, php y Mysql, el código que aquí se utilizara es utilizando una pequeña clase para uso de mysql que hice hace algunos días y que pueden encontrar aquí, aunque en los archivos de descarga pondré los 2 utilizando la clase y sin ella.

Bueno para empezar mi base de datos se llama poblaciones y estas son las tablas que necesitamos:

PLAIN TEXT
MySQL:
  1. País:
  2. CREATE TABLE `pais` (
  3. `idpais` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  4. `pais` VARCHAR(50) DEFAULT NULL,
  5. PRIMARY KEY USING BTREE (`idpais`)
  6. ) ENGINE=MyISAM;
  7.  
  8. Estado:
  9. CREATE TABLE `estado` (
  10. `idestado` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  11. `estado` VARCHAR(50) DEFAULT NULL,
  12. `pais` INT(11) NOT NULL DEFAULT '0',
  13. PRIMARY KEY USING BTREE (`idestado`)
  14. ) ENGINE=MyISAM;
  15.  
  16. Ciudad:
  17. CREATE TABLE `ciudad` (
  18. `idciudad` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  19. `ciudad` VARCHAR(50) NOT NULL DEFAULT '',
  20. `estado` INT(11) NOT NULL DEFAULT '0',
  21. `pais` INT(10) UNSIGNED NOT NULL DEFAULT '0',
  22. PRIMARY KEY USING BTREE (`idciudad`)
  23. ) ENGINE=MyISAM;

y este código de la pagina donde estarán nuestros combos:
"com_dependientes.php"

PLAIN TEXT
PHP:
  1. <?php
  2. include("mysql_inc.php");
  3. $mysql = new MySql_Class;
  4. $mysql->user="root";
  5. $mysql->password="root";
  6. $mysql->db="poblaciones";
  7. $mysql->server="localhost";
  8. $mysql->conection();
  9. ?>
  10. <script src="js/jquery.js"></script>
  11. <script>
  12. $(document).ready(function(){
  13.     $("select").change(function(){
  14.         // Vector para saber cuál es el siguiente combo a llenar
  15.  
  16.         var combos = new Array();
  17.         combos['pais'] = "estado";
  18.         combos['estado'] = "ciudad";
  19.         // Tomo el nombre del combo al que se le a dado el clic por ejemplo: país
  20.         posicion = $(this).attr("name");
  21.         // Tomo el valor de la opción seleccionada
  22.         valor = $(this).val()       
  23.         // Evaluó  que si es país y el valor es 0, vacié los combos de estado y ciudad
  24.         if(posicion == 'pais' && valor==0){
  25.             $("#estado").html('    <option value="0" selected="selected">----------------</option>')
  26.             $("#ciudad").html('    <option value="0" selected="selected">----------------</option>')
  27.         }else{
  28.         /* En caso contrario agregado el letreo de cargando a el combo siguiente
  29.         Ejemplo: Si seleccione país voy a tener que el siguiente según mi vector combos es: estado  por qué  combos [país] = estado
  30.             */
  31.             $("#"+combos[posicion]).html('<option selected="selected" value="0">Cargando...</option>')
  32.             /* 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 */
  33.             if(valor!="0" || posicion !='ciudad'){
  34.             // Llamamos a pagina de combos.php donde ejecuto las consultas para llenar los combos
  35.                 $.post("combos.php",{
  36.                                     combo:$(this).attr("name"), // Nombre del combo
  37.                                     id:$(this).val() // Valor seleccionado
  38.                                     },function(data){
  39.                                                     $("#"+combos[posicion]).html(data);    //Tomo el resultado de pagina e inserto los datos en el combo indicado                                                                               
  40.                                                     })                                               
  41.             }
  42.         }
  43.     })       
  44. })
  45. </script>
  46. <form id="form1" name="form1">
  47. <div>
  48. <select name="pais" id="pais">
  49.     <option selected="selected" value="0">---------</option>
  50. <?
  51. $query = $mysql->query("SELECT * FROM pais");
  52. if($query["amount"]>0){                       
  53.     foreach($query["data"] as $rs){
  54.     ?>
  55.         <option value="<?=$rs["idpais"]?>"><?=$rs["pais"]?></option>
  56.     <?
  57.     }
  58. }
  59. ?>
  60.                         </select>
  61. </div>
  62.  
  63. <div>
  64. <select id="estado" name="estado">
  65.     <option value="0" selected="selected">----------------</option>
  66. </select>
  67. </div>
  68.  
  69. <div>
  70. <select id="ciudad" name="ciudad">
  71.     <option value="0" selected="selected">-------------------</option>
  72. </select>
  73. </div>
  74. </form>

y este es el código de "combos.php" :

PLAIN TEXT
PHP:
  1. <?
  2. include("mysql_inc.php");
  3. $mysql = new MySql_Class;
  4. $mysql->user="root";
  5. $mysql->password="root";
  6. $mysql->db="poblaciones";
  7. $mysql->server="localhost";
  8. $mysql->conection();
  9. $idcombo = $_POST["id"];
  10. $action =$_POST["combo"];
  11. switch($action){
  12.     case "pais":{
  13.         $query =$mysql->query("SELECT idestado,estado FROM estado WHERE pais = $idcombo order by estado ASC");
  14.         foreach($query["data"] as $rs)
  15.             echo '<option value="'.$rs["idestado"].'">'.htmlentities($rs["estado"]).'</option>';   
  16.     break;
  17.     }
  18.     case "estado":{       
  19.         $query =$mysql->query("SELECT idciudad,ciudad FROM ciudad WHERE estado= $idcombo order by ciudad ASC");
  20.         foreach($query["data"] as $rs)
  21.             echo '<option value="'.$rs["idciudad"].'">'.htmlentities($rs["ciudad"]).'</option>';   
  22.     break;
  23.     }
  24. }
  25. ?>

y por último acá los archivos aquí los archivos en descarga con la siguiente estructura:
conclase -> capeta con el script tal y como esta en este post
sinclase -> carpeta con el script sin el uso de la clase
combos_dependientes.sql -> Archivo de texto con las ciudades, estados de méxico, solo las tablas ustedes crean la base de datos e insertan estas y cambian el nombre de la base datos en el script y listo tiene que funcionar de la mejor manera.

Date una vuelta por mi Blog para más ejemplos :D -> http://jjeb.wordpress.com/

Aptana un IDE para el desarrollo web

25 Jul 2008 Author: israel In: CSS, JavaScript, PHP, Programas, Recursos, Tecnología

Primero que nada hola a todos, es mi primer post en este blog desde ahora voy a colaborar espero sea de ayuda para todos.

Aptana es un nuevo entorno de desarrollo especializado, donde podrás programar diferentes lenguajes como PHP, Ruby, JavaScript, etc. También podrás utilizarlo como editor de sintaxis SQL, puedes utilizar CSS y visualizarlos a la ves ,lo mas útil de esta herramienta es que se especializa en programación de aplicaciones dinámicas web, utilizando Ajax he inclusive puedes utilizar el framework de Ruby on Rails, es una excelente opción sin duda alguna.

Esta opción la podemos trabajar en los sistemas operativos Windows y Linux, es muy sencilla de instalar, en Windows solo hay que ejecutar el .exe y darle el clásico siguiente ... siguiente... siguiente.

Para Linux puedes descargarte el .tar.gz y descomprimirlo, después solo hay que darle doble click al ejecutable llamado Apatana, y listo ya estarás en el ambiente de trabajo de Apatana, podrás bajarte después plugins para trabajar con diferentes lenguajes y framework.

Aquí les dejo el enlace de aptana.

Espero les guste este magnifico IDE, si te interesa saber mas sobre Software Libre entra a la comunidad ihtoa.org.

40 Tutoriales de Photoshop para crear Luces y Efectos Abstracots

23 Jul 2008 Author: Ricardo Martinez In: Photoshop

Light Streaks

Eclipse EffectExplosion EffectNavegando por la web y buscando diferentes efectos de luz en Photoshop llego a vandelaydesign, donde publican 40 tutoriales sobre la creacion de luces y efectos abstractos que son de muy buena calidad. Espero y les gusten

Ir al post

Tambien puedes visitar mi blog

Ahora Paypal acepta Pesos Mexicanos

7 Jul 2008 Author: gabriel In: Otros

Hace unos días recibí un correo de PayPal informándome que ahora ya se pueden recibir pagos en pesos Mexicanos subject: "PayPal le da la bienvenida al peso mexicano" la noticia creo que alegra a mas de uno, ya que era realmente un problema cobrar en Dólares o Euros en nuestro sitio web.

Que bueno que PayPal apuesta por incluir el peso mexicano como opción de pago, ya que en nuestro país va creciendo y obteniendo mas importancia el comercio electrónico.

Paypal

Excelente :)

Nueva Web Red Social (tipo Fotolog, Metroflog) con más Funciones :D

28 Jun 2008 Author: Angel López In: Diseño, Recursos, Webs

Hola buenas a todos!!

Pues hoy vengo con la noticia de que estoy estrenando otra página la cual es una red social al estilo de Fotolog, Metroflog etc. pero con más funciones y más dinamismo... ahorita esta en su fase Beta y por lo mismo pido su colaboración para que entren y se animen a probarla :D y le piquen a todo y si llegan a encontrar algún error me lo hagan saber aquí en los comentarios :P

Frinker Red Social

www.Frinker.com

Enserio me esforcé programandola... ahorita quizá no es el mejor diseño que se pueda esperar pero esque sinceramente yo no soy muy dado en cuestiones de diseño.. pero no se preocupen.. ya estoy trabajando en colaboración con una amiga que me esta ayudando a hacer el diseño... Si alguien quisiera apoyarme con la parte de diseño es bievenido :D

Tengo muchas ideas que estan muy buenas y estoy trabajando en ellas para hacer crecer esta nueva red social que espero y de verdad les guste... saludos a todos y entren porfa :D

Acerca de este blog

Este blog tiene la intensión de facilitarle al lector el gran contenido existente en internet en sus amplias y variadas temáticas como el ocio, los videojuegos, peliculas, series, autos, recetas, descargas, recomendaciones, programaciones y cualquier cosa que se me valla ocurriendo con el tiempo. Tengo la intensión de estar actualizando el blog constantemente y así proporcionarle la mejor información al lector.
Cualquier duda, comentario o sugerencia por favor escríbelo aquí en los comentarios

Flickr PhotoStream

    IMG_9584IMG_9591TreeYoung lion at Kgalagadi Transfrontier NPAbeja y florwindscreen frost

Recomendado

Calendario

December 2008
M T W T F S S
« Nov    
1234567
891011121314
15161718192021
22232425262728
293031  

Chat - Comentarios


Recomendados

Categorias

Copyright © 2007 - Recursos Del Web - es orgullosamente desarollado por WordPress
Tema Dilectio es creado por: Design Disease traido a usted por Smashingmagazine.com