Dynamic Dependent Select Box using jQuery and Ajax

We often see dependent select box on the websites, when parent changes, its child select box automatically changes. Today i will explain that how it works, i will use example of country and cities, when someone select any country, cities of that country will be displayed automatically. Let me give you a quick review of this tutorial, all countries are fetching from database table name county, when someone select any country then it fetches the cities of that country without refresh or reload the page this is the power of Ajax which helps to retrieve data from database without refresh page.

Download Complete Source Code

Dynamic Dependent Select Box using jQuery and Ajax

Steps to Create Dynamic Dependent Select Box using jQuery and Ajax

  1. Create a Database
  2. Create Two Tables of County and City
  3. Create a Database Connection
  4. Create Index File with Ajax
  5. Create Action PHP File

1. Create a Database

Create a database with name parent_child_select. Simply execute the following query.

CREATE DATABASE parent_child_select;

2. Create Two Tables of County and City

Create two tables of county and city with name country and city. Simply execute the following queries. Or you can also import the attached sql file to create table with data which is available in download file.

CREATE TABLE IF NOT EXISTS `country` (
 `country_id` int(11) NOT NULL AUTO_INCREMENT,
 `country_name` varchar(50) NOT NULL,
 PRIMARY KEY (`country_id`)
 );

CREATE TABLE IF NOT EXISTS `city` (
 `city_id` int(11) NOT NULL AUTO_INCREMENT,
 `city_name` varchar(50) NOT NULL,
 `country_id` varchar(50) NOT NULL,
 PRIMARY KEY (`city_id`)
 );

3. Create a Database Connection

Simply create a file with name db.php and paste the below code there.

$hostname = "localhost";
$user = "root";
$password = "";
$database = "parent_child_select";
$bd = mysql_connect($hostname, $user, $password) 
or die("DB Connection Failed!");
mysql_select_db($database, $bd) or die("DB Connection Failed!");

4. Create Index File with Ajax

Create a file with name index.php and paste the below code there. I will add the Ajax code in the footer of this file.

<html>
<head>
<title>Dynamic Dependent Select Box using jQuery and Ajax</title>
</head>
<body>
<div>
<label>Country :</label><select name="country" class="country">
<option selected="selected" value="0">Select Country</option>
<?php
include('db.php');
$sql=mysql_query("select * from country");
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
} ?>
</select><br/><br/>
<label>City :</label><select name="city" class="city">
<option selected="selected">Select City</option>
</select>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var id_String = 'id='+ id;

$.ajax
({
type: "POST",
url: "ajax_cities.php",
data: id_String,
cache: false,
success: function(citydata)
{
$(".city").html(citydata);
} 
});

});
});
</script>
</body>
</html>

5. Create Action PHP File

Create a file with name ajax_cities.php and paste the below code there.

include('db.php');
if($_REQUEST['id'])
{
$id=$_REQUEST['id'];
if($id==0){echo "<option>Select City</option>";}else{
$sql=mysql_query("select * from city where country_id='$id'");
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
}
}
}

Download Complete Source Code

Leave your comments if you find this tutorial helpful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s