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

Author: Zeeshan Rasool  |  Last updated on March 30th, 2019 AJAX, JQuery, PHP Tutorials, Web Development

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

PART TWO IS HERE

Table Structure

PHP

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

1 2 3 4 5 6

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

<!--?php if($_REQUEST) { $id = $_REQUEST['parent_id']; $query = "select * from ajax_categories where pid = ".$id; $results = mysql_query( $query);?--><select id="sub_category_id" name="sub_category"> <option selected="selected" value=""></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 }?-->

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!--?php if($_REQUEST) { $id = $_REQUEST['parent_id']; $query = "select * from ajax_categories where pid = ".$id; $results = mysql_query( $query);?--><select id="sub_category_id" name="sub_category">   <option selected="selected" value=""></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

PHP

<div class="both"> <h4>Select Category</h4> <select id="search_category_id" name="search_category"> <option selected="selected" value=""></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 id="loader" style="margin-top: 8px; float: left;" src="loader.gif" alt=""></div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<div class="both">   <h4>Select Category</h4>   <select id="search_category_id" name="search_category">   <option selected="selected" value=""></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 id="loader" style="margin-top: 8px; float: left;" src="loader.gif" alt=""></div>   </div>

Few More Brilliant Posts !

• Live Username Availability Checking using Ajax and jQuery. Demo Available
• How To: Create dynamic Content Loading using Ajax and jQuery
• N-Level of Dynamic Loading of DropDowns using Ajax and PHP. Part 2
• Ajax Tutorial: How to Create Ajax Search Using PHP jQuery and MYSQL

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

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

• 

  TsupamaN December 10, 2014 at 11:07 am

  thank you great code.
• 

  hrace009 January 2, 2015 at 10:25 am

  How i can implant like this on wordpress?
• 

  Pradeep Kumar March 2, 2015 at 5:00 am

  this code sucks, no category in database
• 

  aldi fajrin December 15, 2016 at 9:33 am

  at least he shared what he got.. and the code i think is good enough to know the basic.
• New Ajax Star Rating System in Tag Cloud Style using JQuery and PHP | 99Points April 4, 2019 at 7:06 am

  […] extracting url data, youtube style share button, facebook style profile edit, Ajax search tutorial, Dynamic dropdown using jQuery and Ajax and many […]