Combobox dependientes utilizando jQuery y Ajax en PHP. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet HTML

¡votar!

Combobox dependientes utilizando jQuery y Ajax en PHP

Es muy habitual que al crear algún desarrollo, tengamos un campo select, donde al seleccionar una de sus opciones, carga de forma dinámica otro combo con las subcategorías de esa categoría seleccionada.

Lo primero que haremos será la creación de la base de datos que vamos a utilizar en nuestro ejemplo.

CREATE TABLE IF NOT EXISTS `ajax_categories` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`category` varchar(50) NOT NULL,
`pid` int(11) NOT NULL,
PRIMARY KEY (`id`)
)

El código HTML de nuestro ejemplo es el siguiente:

<div class="both">
<h4>Select Category</h4>
<select name="search_category"  id="search_category_id">
<option value="" selected="selected"></option>
<?php
$query = "select * from ajax_categories where pid = 0";
$results = mysql_query($query);
while ($rows = mysql_fetch_assoc(@$results))
{?>
<option value="<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>
<?php
}?>
</select>		
</div>
<div class="both">
<h4 id="show_heading">Select Sub Category</h4>
<div id="show_sub_categories" align="center">
<img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />
</div>
</div>

En este código lo que hacemos es crear el combo de las categorías principales haciendo la consulta a la base de datos para obtener las categorías que tienen “id” igual a 0.

También tendremos un “div” oculto que serán donde se carguen las subcategorías de la categoría padre.
Cuando se seleccione una categoría, se ejecutará el archivo php encargado de obtener los resultados de las categorías hijos. El código es el siguiente:

<?php
if($_REQUEST)
{
$id 	= $_REQUEST['parent_id'];
$query = "select * from ajax_categories where pid = ".$id;
$results = mysql_query( $query);?>
<select name="sub_category"  id="sub_category_id">
<option value="" selected="selected"></option>
<?php
while ($rows = mysql_fetch_assoc(@$results))
{?>
<option value="<?php echo $rows['category'];?>  ID=<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>
<?php
}?>
</select>	
<?php	
}?>

Para que todo funcione mediante AJAX, debemos de indicar de alguna forma que cuando se produzca un cambio en el combox principal, se ejecute el código que haga la llamada al php que obtiene las subcategorías.

El código javascript utilizado para esto es el siguiente:

<script type="text/javascript"> 
$(document).ready(function() {
$('#loader').hide();
$('#show_heading').hide();
$('#search_category_id').change(function(){
$('#show_sub_categories').fadeOut();
$('#loader').show();
$.post("get_chid_categories.php", {
parent_id: $('#search_category_id').val(),
}, function(response){
setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response){
$('#loader').hide();
$('#show_heading').show();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
} 
function alert_id()
{
if($('#sub_category_id').val() == '')
alert('Please select a sub category.');
else
alert($('#sub_category_id').val());
return false;
}
</script>

Vía: 99points.info