ajax cascading dropdown example using jquery Php and mysql.

dependent dropdown with ajax and php is very common to use script so I create one script for developers cascading dropdown ajax post is about how to create dependent dropdown with jQuery Mysql Php.I have seen there are many tutorial ,but this tutorial is populate dropdown using ajax with xml. In the example we will take 3 dependent dropdown list

Live DemoOthers tutorial just load dropdown / selectbox with php and in this case your dropdown may disapear for a moment,But here we are using jQuery to populate dependent drop down items.

if you are an angular developer here is new post on dependent dropdown in angular

In this tutorial we fetch data from database and covert it to xml format and populate it into dropdown with the help of jQuery/Javacript.Thge reason to convert data to xml is that it can be easily populated to next dropdown with help of jQuery/Javascript in fraction of seconds.

In some internet turorial they create the dropdown and send it as a response but it is not good so,In this totorial we send only data to the browser as response.

At the end of this article you can view its live example and can download toolkit to play.

Now lets start how to fill dropdown list using javascript,jquery,Ajax, Php and mysql.

at the end i create two ajax dropdown examples,One is ajax dropdown with javascript and second ajax dropdown with jquery.

The cascading dropdown will be done with “Parent child” relation between them. In this example we are using three drop down so there is catagory , subcategory and sub-subcatagory.

In example we populate dropdown with ajax items will be.

Printer Manufacturer.
Printer Type.
Printer Model.

Lets digg into the logic.

Database : (Mysql)

Table structure for these will be look like this.The Image shows the relation between these three tables.

first table is manufacturer, second holds catagory (Printer Type),third table holds subcatagory (Printer Model).

Code : “PHP“

File: dbconfig.inc.php

$dbhost = “db-host”;
$dbuser = “database-user”;
$dbpass = “password”;
$dbname = “database-name”;

// — do not edit below this line —

// connect using PDO
try { // attempt to create a connection to database
	$dbh = new PDO(“mysql:host=$dbhost;dbname=$dbname”, $dbuser, $dbpass);
}
catch(PDOException $e) { // if it fails, we echo the error and die.
	echo $e-&gt;getMessage();
	die();
}

$dbhost = “db-host”;

$dbuser = “database-user”;

$dbpass = “password”;

$dbname = “database-name”;

// — do not edit below this line —

// connect using PDO

try { // attempt to create a connection to database

$dbh = new PDO(“mysql:host=$dbhost;dbname=$dbname”, $dbuser, $dbpass);

}

catch(PDOException $e) { // if it fails, we echo the error and die.

echo $e–>getMessage();

die();

}

Configure this file after you download ajax control toolkit dropdown.

db-host : Your database host (Most commonly “localhost” ).
database-user : username of your mysql database.
password : your database password.
database-name : your database name.

Sample Code of man_list and its response.:

File : man_list.php

// manufacturer_list
include(“dbconfig.inc.php”);

header(“Content-type: text/xml”);
echo “&lt; ?xml version=”1.0″ ?&gt;n”;
echo “n”;
$select = “SELECT * FROM manufacturers”;
try {
	foreach($dbh-&gt;query($select) as $row) {
		echo “nt”.$row[‘man_id’].”nt”.$row[‘man_name’].”nn”;
	}
}
catch(PDOException $e) {
	echo $e-&gt;getMessage();
	die();
}
echo “”;

// manufacturer_list

include(“dbconfig.inc.php”);

header(“Content-type: text/xml”);

echo “< ?xml version=”1.0” ?>n”;

echo “n”;

$select = “SELECT * FROM manufacturers”;

try {

foreach($dbh–>query($select) as $row) {

echo “nt”.$row[‘man_id’].“nt”.$row[‘man_name’].“nn”;

}

catch(PDOException $e) {

echo $e–>getMessage();

die();

}

echo “”;

Response :

&lt; ?xml version=”1.0″ ?&gt;


	30
	Apple


	31
	Brother


	32
	Canon


	33
	Compaq

< ?xml version=“1.0” ?>

Apple

Brother

Canon

Compaq

Code: “Javascript”

File : myminiAJAX.js

Contains code for making ajax request and ajax loader.

function createREQ();

Create Request to server .

function requestGET(url, query, req);

If request uses GET method .

function requestPOST(url, query, req);

If request uses POST method .

function doCallback(callback, item) ;

Which function should be use to display response.

function doAjax(url, query, callback, reqtype, getxml);

Main AJAX function.

Code: “Javascript/jQuery”

File : function.js

Contains Callback Function.Convert xml data to dropdown items.

function populateComp(xmlindata)

Populate Company(Manufacturer)

function populateType(xmlindata)

Populate Printer Type.

function populateModel(xmlindata)

Populate Printer Model .

How it works.

1. First ajax call -When page load

it populate the first dropdown.and disable other two selctboxes.(i.e first dropdown autocomplete).

2. Second ajax call – Onchange dropdown (First Dropdown i.e “manufacturer” ).

enable second dropdown -Populate type type in second dropdown,disable third dropdown.

3.Third ajax Call -onchange dropdown (second dropdown i.e “type”).

Live Demo

Download

Happy Coding

Buffer Now

Create Dependent Dropdown with Ajax and PHP: Tutorial for Cascading Dropdowns with jQuery, MySQL, and XML