Aprender a trabajar con combo box o select dependientes y dinámicos es algo casi que fundamental para todo desarrollador, pues generalmente este tipo de campos pueden ayudarnos a recolectar de mejor manera ciertos datos de los usuarios, por ejemplo pueden ser muy útiles cuando queremos que el usuario nos suministre su dirección o cuando queremos realizar búsquedas por categorías relacionadas entre sí.
En estos dos casos por lo general requerimos de combo box dinámicos que cargan su contenido desde una base de datos y estos datos a su vez se encuentran relacionados, por lo que el contenido del segundo se afectara si realizamos otra selección en el primero. Se trata de una especie de relación padre – hijo en la cual los datos que se muestren en el select hijo provendrán de una consulta que se filtrara en base a la selección que hallamos realizado en el primero, tratare de explicar cómo se realiza este proceso de la forma más sencilla posible utilizando Ajax, php, sql y html.
Paso 1
Comenzaremos por crear una base de datos con las tablas que contendrán los datos que queremos mostrar en los select…
En este caso voy hacer un ejemplo de dos niveles, por lo cual usare 2 select en uno mostrare los estados de Venezuela y en el segundo mostrare los municipios correspondientes a cada estado, de esta forma cada vez que seleccionemos un estado en el primer select el segundo se cargara con los municipios que le correspondan.
Comencemos con la base de datos.
Con la ayuda del servidor local XAMPP y phpMyAdmin voy a crear una nueva base de datos a la cual llamare “territorio” y en ella creare dos tablas que llamare “estados” y “municipios” las cuales tendrán 2 y 3 campos respectivamente, a continuación les muestro en detalle.
Como ya les mencione para la tabla “estados” crearé dos campos uno llamado “id_estados“ el cual será autoincrementable y otro al cual llamare “estado” en el cual se almacenaran los estados correspondientes a la distribución territorial de mi país, en este caso tengo cargados previamente a modo de prueba 2 estados.
Ahora en la tabla “municipios” tendre 3 campos uno llamado “id_mcpio” que será auto incrementable, otro que llamare “id_estado” el cual estará relacionado de forma foránea con el campo del mismo nombre que está presente en la tabla “estados” y por ultimo tendremos un campo llamado municipio.
De esta manera tenemos una relación de uno a muchos entre la tabla estado y municipios.
Paso 2
Ya que tenemos la base de datos y sus tablas con los datos precargados vamos a comenzar a estructurar nuestro proyecto, para esto vamos a la carpeta “htdocs” en caso de que estén usando XAMPP y creamos una nueva carpeta para nuestro proyecto a la que le colocare el nombre “selectmultiple”, dentro de ella creare dos carpetas adicionales llamadas, “php” y “css” para mantener nuestros archivos organizados…
Paso 3
Comenzare a preparar lo que será el formulario para esto vamos a utilizar bootstrap para crear el diseño del mismo.
Primero que nada ire a la dirección http://getbootstrap.com/ desde la cual desgaremos los archivos de bootstrap para poder usarlos en local. Una vez descargado y descomprimido vamos a tomar solo el archivo llamado “bootstrap.min.css” y lo copiaremos dentro de la carpeta “css” que creamos en el paso anterior.
Posteriormente en el editor de código crearé un archivo html al cual le añadiré una referencia a la ruta de la hoja de estilos de bootstrap de la siguiente manera.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<head>
</head>
<body>
</body>
</html>
Paso 4
Luego en el body de este archivo utilizaremos las clases de bootstrap para darle un toque de diseño, comenzaremos añadiendo un titulo <h2> y la etiqueta <legend> que nos servirá de separador, posteriemente creamos nuestro formulario dentro del cual tendremos 2 select con los nombres “estados” y “municipios” estos se llenaran dinámicamente desde la base de datos por lo que de momento solo tendrán una única opción con un valor vacío.
<body> <div class="col-md-12"> <h2>Select dependientes<h2> <legend></legend> <br> <div class="col-md-6"> <form action=""> <div class="form-group"> <select name="estados" class="form-control" onchange="showselect(this.value)" > <option value="">Seleccione</option> </select> </div> <div class="form-group"> <div id="municipios"> <select name="municipios" class="form-control"> <option value="">Seleccione</option> </select> </div> </div> <input type="submit" class="btn btn-primary" value="Submit"> </form> </div> </body>
Paso 5
Crearemos 2 nuevos archivos para configurar la conexión con la base de datos. En el primero llamado “config.php” definiremos los parámetros de conexión tales como servidor, usuario, contraseña y base de datos, a continuación les dejo el código.
<?php
/*
| -------------------------------------------------------------------
| CONFIGURACION DE CONEXION DE BASE DE DATOS
| -------------------------------------------------------------------
*/
$Servidor="localhost";
$Usuario="root";
$Password="admin";
$BaseDeDatos="territorio";
/*
| -------------------------------------------------------------------
| FIN DE CONFIGURACION DE CONEXION DE BASE DE DATOS
| -------------------------------------------------------------------
*/
?>
Del mismo modo crearemos un nuevo archivo en el cual incluiremos el anterior y lo usaremos para establecer la conexión con la base de datos, lo guardare con el nombre “conexión.php”.
<?php
include_once("config.php");
$conexion= @mysql_connect($Servidor,$Usuario,$Password) or die("Error: El servidor no puede conectar con la base de datos");
$selector=@mysql_select_db($BaseDeDatos,$conexion);
@mysql_set_charset("utf8", $conexion);
?>
Paso 6
Procederemos a llenar el primer select, para esto crearemos un nuevo archivo el cual guardaré como “estados.php” dentro de la carpeta php de nuestro sitio que hemos creado anteriormente.
En este archivo deberemos incluir el fichero “conexión.php” creado previamente, el proceso de este archivo será sencillo, realizara una consulta a la base de datos que nos devolverá todos los estados que en ella estén almacenados y posteriormente esos resultados los imprimiremos por medio de la sentencia “echo” como una opción para el select “estados”. El código seria el siguiente…
<?php
require ("conexion.php");
$consulta= "SELECT * FROM estados";
$resultado= mysql_query($consulta,$conexion) or die (mysql_error());
while($fila = mysql_fetch_array($resultado)){
echo "<option value='".$fila['id_estado']."'>".$fila['estado']."</option>";
}
mysql_close($conexion);
?>
Pero sin embargo para que esto funcione deberemos incluir este último fichero dentro de nuestro “index.php” exactamente por debajo de la opción vacía que ya teníamos dentro del select llamado estados… Nótese que también se ha incluido en el select un evento onchange haciendo un llamado a la función “showselect” y pasándole como parámetro el contenido seleccionado en este campo, dicha función la escribiremos en el paso siguiente…. El código hasta ahora nos quedaría de la siguiente manera…<div class="form-group"> <select name="estados" class="form-control" onchange="showselect(this.value)" > option value="">Seleccione</option> <?php include "php/estados.php" ?> </select> </div>Ahora si verificamos en el navegador veremos que el primer select se llena con los estados que tenemos en la base de datos.
Ahora tendremos que escribir código Ajax y un nuevo fichero php para hacer que el segundo select se cargue en función de lo que seleccionemos en el primero, vamos a ello…
Paso 7
En el head del archivo “index.php” escribiré una función javascript que me permitirá enviar a en la url una cadena de texto correspondiente al contenido del select estado, esa cadena de texto la enviare al fichero “municipios.php” y la misma función Ajax hará que obtenga dentro del select municipios los valores correspondientes al estado seleccionado. A continuación les dejo la función.
<script type="text/javascript">
function showselect(str){
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("municipios").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","php/municipios.php?c="+str,true);
xmlhttp.send();
}
</script>
Paso 8
Escribiremos el contenido del fichero “municipios.php” en este deberemos imprimir un nuevo select con los valores que obtendremos de la base de datos, básicamente la función Ajax hara que se abtualice completamente el segundo select.
Primero incluiremos el archivo de conexión a la base de datos, luego lanzaremos la consulta sobre todos los elementos de la tabla municipios y luego por medio de un ciclo while y un condicional if determinaremos cuales de las filas devueltas por la consulta corresponden con el estado que pasamos en la variable a través de la función Ajax… solo aquellas que concuerden serán mostradas en el select de municipios…
<?php
echo '<select name="municipios" class="form-control">';
require ("conexion.php");
$consulta= "SELECT * FROM municipios";
$resultado= mysql_query($consulta,$conexion) or die (mysql_error());
?>
<option value="">Seleccione</option>
<?
while($fila = mysql_fetch_array($resultado)){
if($fila['id_estado'] == $_GET['c']){
echo "<option value='".$fila['id_mcpio']."'>".$fila['municipio']."</option>";;
}
}
mysql_close($conexion);
echo '</select>';
?>
Por si tienen alguna duda les dejo un .zip con los archivos correspondientes para que puedan revisarlo con detenimiento...
selectmultiple20151106154727.zip 21,33K
1743 Descargas
Gracias Ronny