Ajax Tutorial: Dynamic Loading of ComboBox using jQuery and Ajax in PHP

Author: Zeeshan Rasool | Last updated on December 22nd, 2010

AJAX, JQuery, PHP, Web Development

[ad#co-4]

Here is a script for beginners to create a dynamic loading of dropdown. Simple solution which is created by jQuery.

PART TWO IS HERE

[ad#ad-3]

Table Structure

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

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

)

get_child_categoires.php

<?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	
}?>

<?php

if($_REQUEST)

{

$id = $_REQUEST['parent_id'];

$query = "select * from ajax_categories where pid = ".$id;

$results = mysql_query( $query);?>

<?php

while ($rows = mysql_fetch_assoc(@$results))

{?>

<?php

}?>

</select>

<?php

}?>

[ad#co-3]

HTML

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

<h4>Select Category</h4>

<?php

$query = "select * from ajax_categories where pid = 0";

$results = mysql_query($query);

while ($rows = mysql_fetch_assoc(@$results))

{?>

<?php

}?>

</select>

</div>

<h4 id="show_heading">Select Sub Category</h4>

</div>

[ad#co-2]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

TsupamaN

thank you great code.
hrace009

How i can implant like this on wordpress?
Pradeep Kumar

this code sucks, no category in database
aldi fajrin

at least he shared what he got.. and the code i think is good enough to know the basic.