Jun

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

ZeeShaN

AJAX, JQuery, PHP, Web Development Tags

ajax tutorial, JQuery

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

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

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

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>

Many Thanks ! to all of the readers of 99Poin...

Ajax Stylish Captcha and Contact Form using J...

Send Email from your Gmail account Using Code...

SimplePie: An amazing and simple way to show ...

Ajax Voting System: Create Ajax Rating/Voting...

By HackingEthics

Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

9 to “Ajax Tutorial: Dynamic Loading of ComboBox using jQuery and Ajax in PHP”

herroen August 2, 2010 at 5:20 am
halo,
are you using just 1 table in database?
how if i want to use separate table for parent n and children?
ZeeShaN August 2, 2010 at 8:59 am
Hi, we can do this with one table then why you want to create 2 tables?
herroen August 2, 2010 at 11:29 am
thank you so much rasool for replying.
you havent attach any sql script within this thread,
so i still confuse about the table structure.
herroen August 2, 2010 at 11:53 am
1 more thing im asking,

do you use the same column for category & sub category?

is it not possible to separate into “category” column and “sub_category” column?

or is it even possible to separate category and sub category into different table (so there will be “category” table and “sub_category” table) as well???

im looking for your reply. thank you
ZeeShaN August 2, 2010 at 6:27 pm
Hi herroen , sorry I couldnt attach db. the table has 3 fields . id, category_name and parent_id
So it will be some thing like this:
ID categoryname parent_id
1 first 0
2 child 1
KanZonk August 8, 2010 at 4:06 pm
Please teach me to build like this using Codeigniter….

How to convert this tutorial to Codeigniter?
JSX Solutions - Isle of Wight Web Design August 16, 2010 at 9:54 pm
Brill guide dude, nice one
shahmy August 23, 2010 at 5:49 am
It is good, But i want to know how create those application using Ajax and Codeigniter.
if you know please help me.
Thank You.
ZeeShaN August 23, 2010 at 7:15 am
@JSX Solutions Thanks dear,
@ KanZonk ,shahmy I will post ajax codeigniter solution soon.