Combos dependientes II

Comentarios 4 COMENTARIOS
Tags 01/08/2006 -  Tags , ,

Continuando con el tema de combos dependientes veamos ahora un ejemplo con Ajax y PHP. El anterior ejemplo nos puede ser útil siempre y cuando no tengamos mucha información, pero supongamos ahora que tenemos dos tablas relacionadas; una de actividades con 17 registros; y otra de subactividades -relacionada con la anterior por un mismo id de actividad- de más de 100 subactividades. En este caso deberemos recurrir a leer desde una base de datos. Si queremos, además, que no se recargue la página para agilizar el uso de nuestro formulario, deberemos usar AJAX.

Tenemos dos tablas:

  • "t_actividades" con los campos "Id" y "Actividad"
  • "t_subactividades" con los campos "IdActividad", "IdSubactividad", "SubActividad". (Los campos en negrita relacionan ambas tablas)

Ahora necesitamos crear un php que sería en el que tendríamos todo nuestro formulario, incluyendo los desplegables de Actividad y Subactividad. Lo vamos a denominar "combos2.php" y en un primer momento tendríamos:

<p><label for="actividad">Actividad:</label>
<select name="Actividades" id="Actividades">
<?
$servidor = 'servidor.dominio.com';
$usuario = 'usuario';
$contrasena = 'password';
$datos = 'basededatos';
mysql_connect($servidor,$usuario,$contrasena);
@mysql_select_db($datos) or die( "Unable to select database");
$query = "SELECT * FROM t_actividades";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
$i=0;
while ($i < $num) {
$Id = mysql_result($result,$i,"Id");
$Actividad = mysql_result($result,$i,"Actividad");
?>
<option value=<? echo $Id; ?>>
<? echo $Actividad ?>
</option>
<?
$i++;
}
?>
</select>
</p>
<p>
<div id="Div_Subactividades">
<label for="SubActividad">SubActividad:</label>
<select name="SubActividades" id="SubActividades" class="select">
</select>
</div>
</p>

Lo que se ha hecho es crear el primer combo a partir de los datos extraidos en la tabla de actividades "t_actividades" y dejar el combo correspondiente a las subactividades vacío, pero dentro de un div llamado Div_Subactividades que será donde se cargue el contenido obtenido tras hacer una petición mediante AJAX.

<div id="Div_Subactividades">
<label for="SubActividad">SubActividad:</label>
<select name="SubActividades" id="SubActividades" class="select">
</select>
</div>

Lo siguiente sería crear una instancia del objeto XMLHttpRequest() y una función que nos permita cargar el contenido del segundo combo en función del primero.

<script type="text/javascript">
var peticion = false;
var testPasado = false;
try {
peticion = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
peticion = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
peticion = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
peticion = false;
}
}
}
if (!peticion)
alert("ERROR AL INICIALIZAR!");
function cargarCombo (url, comboAnterior, element_id) {
//Obtenemos el contenido del div
//donde se cargaran los resultados
var element = document.getElementById(element_id);
//Obtenemos el valor seleccionado del combo anterior
var valordepende = document.getElementById(comboAnterior)
var x = valordepende.value
//construimos la url definitiva
//pasando como parametro el valor seleccionado
var fragment_url = url+'?Id='+x;
element.innerHTML = '<img src="Imagenes/loading.gif" />';
//abrimos la url
peticion.open("GET", fragment_url);
peticion.onreadystatechange = function() {
if (peticion.readyState == 4) {
//escribimos la respuesta
element.innerHTML = peticion.responseText;
}
}
peticion.send(null);
}
</script>

La función "cargarCombo" quizá sea la más interesante. Se le pasan tres parámetros: la url a la que llamamos, el combo del que depende el que vamos a cargar, y el id del div donde se cargará el resultado. El código javascript lo podemos insertar en el mismo "combos2.php" o hacer un include. El valor del segundo combo variará siempre que cambie el contenido del primer combo con lo que deberemos llamar a la función "cargarCombo" al evento onchange del select 'Actividades'. Por lo que finalmente quedaría:

<select name="Actividades"  onchange="javascript:cargarCombo('Subactividades.php', 'Actividades', 'Div_Subactividades')" id="Actividades">

Por último nos queda crear un fichero "Subactividades.php", que en función de la actividad seleccionada, cargará en el desplegable las subactividades correspondientes.

<?
$IdActividad = $_REQUEST['Id'];
?>
<label for="SubActividad">SubActividad:</label>
<select name="SubActividades" id="SubActividades" class="select">
<?
$servidor = 'servidor.dominio.com';
$usuario = 'usuario';
$contrasena = 'password';
$datos = 'basededatos';
mysql_connect($servidor,$usuario,$contrasena);
@mysql_select_db($datos) or die( "Unable to select database");
$query = "SELECT * FROM t_subactividades WHERE IdActividad=$IdActividad";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
$i=0;
while ($i < $num) {
$IdSubactividad = mysql_result($result,$i,"IdSubactividad");
$SubActividad = mysql_result($result,$i,"SubActividad");
?>
<option value=<? echo $IdSubactividad; ?>>
<? echo htmlentities($SubActividad) ?>
</option>
<?
$i++;
}
?>
</select>

También te puede interesar:

Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.

BonkEnc extrae, codifica y convierte archivos de audio

BonkEnc extrae, codifica y convierte archivos de audio

Plotr

Plotr

Swirrl

Swirrl

Menú estilo puertas de garaje con jQuery

Menú estilo puertas de garaje con jQuery

HTML fixer

HTML fixer
Comentarios
1 ismael

lo tienes este para asp? saludos
2 Lucas

Muchas gracias, muy útil y mucho más simple que tanto de que da vueltas por ahí. Gracias.
3 jose

Saludos

Amigo copie todo tu codigo y los llame con los mismos nombres que haz indicado aqui. El codigo javascript lo coloque en combo2.php despues del y antes del para que se cargue previamente antes que el cuerpo del formulario.

Pero no me ha servido, es decir, solo obtengo el listado de las Actividades, pero nunca se inicia o se activa nada en el de Subactividades. Estas seguro que tu codigo funciona?
4 Victor
http://www.enlaze.cl

Muchas gracias! Funcionó perfecto. José ¿hiciste el cambio del onChange?
Haz un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com