Combos anidados con JQuery

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, entiéndase por combos los elementos de tipo SELECT. Ajax es la manera más profesional de trabajarlo,  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 JQuerydesarrollado por Carlos De Oliveira, para selects simples y anidados. esta extensión, simplifica el proceso de obtener data en combos SELECT, aún si están anidados o no. La única condición 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.

jCombo.min.js (comprimido) jCombo.js jCombo en github

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 (entre etiquetas head):

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

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

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

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

3.- indicamos que selects serán anidados:

<p>Paises: <select name="selPaises" id="selPaises"></select></p>
<p>Ciudades: <select name="selCiudades" id="selCiudades"></select></p>
<p>Zonas: <select name="selZonas" id="selZonas"></select></p>

---

¿Como funciona?

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

$("select[name='paises']").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 PHP sin 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 valores de acuerdo al valor pasado por parámetro.

$("#selPaises").jCombo("funciones.php?funcion=get_paises",{});
$("#selCiudades").jCombo("funciones.php?funcion=get_ciudades&id="{ ...
$("#selZonas").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 destinados 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(
                    htmlspecialchars($row[0],ENT_QUOTES), 
                    htmlspecialchars($row[1],ENT_QUOTES));
      }   
   }
   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 !ctype_digit($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(
                    htmlspecialchars($row[0],ENT_QUOTES), 
                    htmlspecialchars($row[1],ENT_QUOTES));
      }  
   }
   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 !ctype_digit($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(
                    htmlspecialchars($row[0],ENT_QUOTES), 
                    htmlspecialchars($row[1],ENT_QUOTES));
      }  
   }
   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($_GET['id']);
      break;

   case 'get_zonas':

     echo get_zonas($_GET['id']);
     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).