Sigueme por RSS! RSS

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.


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).

2 comentarios: Suscribete a los comentarios por RSS

Ing. Lorena Gómez

Saludos, quiero saber si me puedes ayudar con lo siguiente tengo las siguientes tablas en la misma base de datos
implemento
trabajador
dotacion
en dotacion debo almacenar los datos del trabajador y los implementos que se le han entregado
quiero saber como hago un combo list que muestre los codigos de los implementos almacenado en la base de datos y al seleccionar un codigo dicha seleccion muestre el nombre del implemento asociado al codigo en otro combo list. gracias

Reinaldo Cassiani (cass)

Hola Lorena, todo parte de la relación de la base de datos, imagino que la tienes algo así:

Trabajador________
Id_trabajador
otros campos....

Implementos________
Id_implemento
otros campos....

Dotaciones________
Id_trabajador
Id_implemento
otros campos....

Ahora, siguiendo el tutorial deberías poder armas los combos, el primero lo llenas haciendo una consulta a la tabla Implementos y trayendo todo lo que encuentres, el segundo lo armarás filtrando por el ID del Implemento que seleccionaste en la tabla Dotaciones.

En el ejemplo del post, Implementos sería Paises y dotaciones sería Ciudades.

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.