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]

Recommended WordPress Themes Stores

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

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

Recommended WordPress Themes Stores

Friends

Categories

Popular post

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

Table Structure

get_child_categoires.php

HTML

Few More Brilliant Posts !

Recommended WordPress Themes Stores

Friends

Categories

Popular post