Build a website fast with GoDaddy.com! - 125x125
Jun
30

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



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


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

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

Post comment



Enter your Email:

Click Here for Popular

Who Am I

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan
Skype: zeeshan-rasool
gTalk: zishan.rasool85

Categories

Archives

Tags

99points adobe AJAX ajax pagination ajax rating ajax tutorial captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials curl dreamweaver cs5 Facebook Facebook. PHP. JQuery facebox farmville ffmpeg flv google api hacking image gallery Joomla JQuery jQuery Sliding Jquery tutorial mafia war Mootools MySQL Payment PHP php curl Poll System recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter Web XSS youtube

Comments