Miguel Manchego » combos http://www.miguelmanchego.com Desarrollador web freelancer php, css, ajax, cms.. Wed, 04 Jan 2012 13:10:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Combos dependientes AJAX base de datos http://www.miguelmanchego.com/2009/combos-dependientes-ajax-base-de-datos/ http://www.miguelmanchego.com/2009/combos-dependientes-ajax-base-de-datos/#comments Tue, 20 Jan 2009 14:48:41 +0000 admin http://www.miguelmanchego.com/?p=132

Anteriormente publiqué un post para crear combos dependientes usando jquery, el cual podía modificarse para ser usado con una base de datos, ahora voy a publicar esa modificación. Puedes ver el post original aqui

En el caso anterior se usaban dos archivos para mostrar el nuevo contenido del combo que serían combo1.php y combo2.php

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;

¿Cómo me conecto a la base de datos?

Lo primero es conectarnos a la base de datos y buscar el elemento seleccionado en el combo y según eso llenar el otro combo por una cuestión de comodidad voy a usar una clase que se encargue de dicha conexion, puedes descargarla y ver como funciona aqui

¿Cómo busco los datos?

Para eso hay que usar una consulta sql como esta:
“SELECT * FROM ciudad WHERE pais_id LIKE ‘$_POST[elegido]‘”
La consulta obviamente varia de acuerdo a nuestra base de datos, para este ejemplo estoy usando una base de datos con las tablas continente, pais y ciudad

combo1.php y combo2.php

El script para ambos similar, lo único que varía es la consulta sql

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// Incluimos la configuración de la conexión de base de datos
include("includes/config.inc.php");
include("includes/mysql.class.php");
// Creamos la conexión
$db = new MySQL();  
// Abrimos la conexión
$db->open();
// Ejecutamos la consulta sql
$consulta = $db->consulta("SELECT * FROM pais WHERE continente_id LIKE '$_POST[elegido]'");
// Creamos un array para mostrar los datos del combo
if ($row = $db->fetch_array($consulta)) {
    do {
        echo
        '<option value="'.$row['pais_id'].'">'.$row['pais_name'].'</option>';
    }while($row = $db->fetch_array($consulta));
}
?>

Puedes bajar todo el código desde aquí
No olvides que para usar ese ejemplo debes subir primero la base de datos (migueltest.sql) y además debes modificar el archivo includes/config.inc.php con la información de tu servidor de base de datos

]]> http://www.miguelmanchego.com/2009/combos-dependientes-ajax-base-de-datos/feed/ 25 Combos dependientes AJAX http://www.miguelmanchego.com/2009/combos-dependientes-ajax-jquery/ http://www.miguelmanchego.com/2009/combos-dependientes-ajax-jquery/#comments Wed, 07 Jan 2009 17:54:10 +0000 admin http://www.miguelmanchego.com/?p=111

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
<select name="combo1" id="combo1"> 
    <option value="op1_1">Option1</option>
    <option value="op1_2">Option2</option>
    <option value="op1_3">Option3</option>    
</select>
<select name="combo2" id="combo2"> 
</select>
<select name="combo3" id="combo3"> 
</select>

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

]]> http://www.miguelmanchego.com/2009/combos-dependientes-ajax-jquery/feed/ 39