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

Author: Zeeshan Rasool | Jun 30, 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]

Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

http://www.tsupaman.com/ TsupamaN

thank you great code.
http://www.pwtwilight.com/ hrace009

How i can implant like this on wordpress?
Pradeep Kumar

this code sucks, no category in database

Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points. Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5

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

Table Structure

get_child_categoires.php

HTML

Categories

Popular post

Friends

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

Table Structure

get_child_categoires.php

HTML

Few More Brilliant Posts !

Categories

Popular post

Friends