Combos anidados con JQuery

http://www.prodiven.com/jcombo/index.php?lang=es

A medida que desarrollamos un sistema, se nos presenta uno u otro requerimiento que debemos resolver rápidamente para no atrasarnos, y mucho mas, si tienes una fecha de entrega muy cercana.

Uno de los casos habituales dentro de un desarrollo es la necesidad de anidar, agrupar, enlazar combos, entiendase por combos los elementos de tipo SELECT. Ajax es la manera más profesional de trabajarlo, y por suerte, disponemos de JQuery para complementar lo que con solo PHP por ejemplo, no podemos conseguir sin que se vuelva tedioso si tienes muchos campos en el mismo formulario.

jCombo es un plugin de JQuery para selects simples y anidados. esta extensión:
simplifica el proceso de obtener data en combos SELECT, aún si estan anidados o no. La única condicion es obtener los campos de la base de datos consecutivamente creando pares de [valor][texto] en formato JSON. No obstrusivo, sin efectos ni estilos. Este componente es un intento para obtener combos anidados de la forma mas rápida posible.
demo descarga
Uso:
1.- incluimos la librería y el plugin (entre etiquetas head)

<!-- incluimos el plugin (jcombo) y el jquery-->
<script type="text/javascript" src="ruta/jquery.js"></script>
<script type="text/javascript" src="ruta/jquery.jCombo.min.js"></script>

2.- configuramos:

<!-- configuramos el plugin-->
<script type="text/javascript">
$(function() {

   // paises es el primer select a llenar<pre class='brush:xml'>
   $("#paises").jCombo("funciones.php?funcion=get_paises",{});

   $("#ciudades").jCombo("funciones.php?funcion=get_ciudades&id=",{
      parent: "#paises" // combo padre
   });  

   $("#zonas").jCombo("funciones.php?funcion=get_zonas&id=",{
      parent: "#ciudades"
   });
});
</script>

3.- indicamos que selects serán anidados:

paises: <select name="paises" id="paises"></select><br/>
ciudades: <select name="ciudades" id="ciudades"></select><br/>
Zonas: <select name="zonas" id="zonas"></select>

---

¿Como funciona?

para llenar el combo basta con llamar al archivo que generara los datos e indicar a quien se le asignaran:

$("select[name='country']").jCombo("get_paises.php");

el plugin trabaja con el formato JSON, así que es en ese formato en el que debemos devolverlos, podemos trabajar con JSON en PHPsin ningún problema. Puedes por ejemplo, llamar a un archivo PHP diferente que te devuelva los datos para cargar cada select o llamar a uno solo que devuelva los vaores de acuerdo al valor pasado por parámetro.

$("#paises").jCombo("funciones.php?funcion=get_paises",{});
$("#ciudades").jCombo("funciones.php?funcion=get_ciudades&id="{ ...
$("#zonas").jCombo("funciones.php?funcion=get_zonas&id=",{ ...

voy a dejar un ejemplo para el contenido funciones.php y como gestiona los valores recibidos, para generar los datos destinado a la carga de cada select.
(clic para mostrar/ocultar código).

<?php
// indicamos que la respuesta tendra el formato JSON
//header('Content-type: application/json');

// conexion con la base de datos
include("config.php");
  
// devuelve en formato JSON los datos para llenar el combo "paises"
function get_paises(){
   $query = "SELECT id_country, country_name FROM countries ORDER BY country_name ASC";
   $result = mysql_query($query);
   $items = array();
   if($result &&   mysql_num_rows($result)>0) {
      while($row = mysql_fetch_array($result)) {
         $items[] = array( $row[0], $row[1]);
      }   
   }
   mysql_close();

   // devolvemos datos en formato json
   return json_encode($items);
}

// retornamos las ciudades pertenecientes a un deterinado pais (id)
function get_ciudades($id){

   if (empty($id) or !is_numeric($id)) return false;

   // en este caso se consultan las columnas tal como se van a devolver
   $query = "SELECT id_city, city_name FROM cities WHERE id_country = '$id' ORDER BY city_name ASC";
   $result = mysql_query($query);
   $items = array();
   if($result &&   mysql_num_rows($result)>0) {
      while($row = mysql_fetch_array($result)) {
         $items[] = array( $row[0], $row[1]);
      }  
   }
   mysql_close();

   // devolvemos datos en formato json
   return json_encode($items);
}

// retornamos las zonas pertenecientes a una deterinada ciudad (id)
function get_zonas($id){

   if (empty($id) or !is_numeric($id)) return false;

   $query = "SELECT id_zone, zone_name FROM zones WHERE id_city = '$id' ORDER BY zone_name ASC";
   $result = mysql_query($query);
   $items = array();
   if($result &&   mysql_num_rows($result)>0) {
      while($row = mysql_fetch_array($result)) {
         $items[] = array( $row[0], $row[1]);
      }  
   }
   mysql_close();

   // devolvemos datos en formato json
   return json_encode($items);
}

// devolvemos solo lo solicitado
switch ($_GET['funcion']){
   case 'get_paises':
    
     echo get_paises();
     break;

   case 'get_ciudades':
     
      echo get_ciudades(!empty($_GET['id'])? intval($_GET['id']) : 0);
      break;

   case 'get_zonas':

     echo get_zonas(!empty($_GET['id'])? intval($_GET['id']) : 0);
     break;

   default:{ echo 'parametros incorrectos';}
}
?>

Opciones: (configuración del plugin)

- parent: elemento SELECT del cual se deben obtener los datos (combo padre).
- initial_text: mensaje por defecto al seleccionar una opción. Si se coloca un valor vacío ('') entonces no se mostrará ningún texto.
- selected_value: preselecciona el combo en el valor colocado.
- parent_value: establece la carga inicial del elemento padre (sólo cuando el elemento está en cascada).

También podría interesarte :


Textarea autoResize con JQuery


Plugin Validation de JQuery


Flexigrid: grid con JQuery


Datepicker JQuery UI