Dependent Country State City Dropdown using AJAX in PHP and MySQL

Tech Area
October 24, 2023

In this tutorial, We will learn how to make Country State City Dependent Dropdown Select using Jquery AJAX in PHP and MySQL. We are using three dependent select box using AJAX in PHP.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (AJAX script)

3- get-data.php (fetch data)

Below are the step by step process of how to make dependent select box using Jquery AJAX.

Step 1: Create a Database connection

In this step, create a new file connection.php to create database connection.

connection.php

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "country_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
	echo("connection terminated");
}
?>

Step 2: Create index.php

In this step, create a new file index.php. This is the main file used to implement AJAX to make dependent dropdown using AJAX.

This screenshot shows the dependent select box.

index.php

<!DOCTYPE html>  
<head>  
    <title>AJAX Country State City Dropdown</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>  
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>  
    <div class="container">  
    <h2 class="text-center">AJAX Country State City Dropdown</h2>
    <br/>
   <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <label for="country">Country:</label>
            <select class="form-control" id="country">
              <option value="0">Select Country</option> 
              <?php
              include("connection.php");
               $fetch_country = mysqli_query($connection,"select * from tbl_country");
               while($country = mysqli_fetch_array($fetch_country)){
              ?>    
              <option value="<?php echo $country['id']; ?>"><?php echo $country['name']; ?></option>
            <?php } ?>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="state">State:</label>
            <select class="form-control" id="state">
              <option>Select State</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="city">City:</label>
            <select class="form-control" id="city">
              <option>Select City</option>
            </select>
          </div>
        </div>
      </div>
  </div>
 </body>  
</html>

Now use jquery AJAX script.

<script type="text/javascript">
  $(document).ready(function(){
    $("#country").change(function(){
      var id = $(this).val();
      if(id=='0')
      {
        $("#state").html('<option value="0">Select State</option>');
        $("#city").html('<option value="0">Select City</option>');
      }
      else
      {
        $("#state").html('<option value="0">Select State</option>');
        $("#city").html('<option value="0">Select City</option>');
      $.ajax({
        url: 'get-data.php',
        method: 'post',
        data: {country_id: id},
        success: function(result)
        {
          $("#state").append(result);
        }
      });
    }
    });
    $("#state").change(function(){
      var id = $(this).val();
      if(id=='0')
      {
        
        $("#city").html('<option value="0">Select City</option>');
      }
      else
      {
        
        $("#city").html('<option value="0">Select City</option>');
      $.ajax({
        url: 'get-data.php',
        method: 'post',
        data: {state_id: id, type:'state'},
        success: function(result)
        {
          $("#city").append(result);
        }
      });
    }
    });
  });
</script>

Step 3: Create new file for fetch data

In this step, create a new file get-data.php. This file used to fetch data from the database.

get-data.php

<?php
include("connection.php");
$c_id = $_POST['country_id'];
$s_id = $_POST['state_id'];
$type = $_POST['type'];
if($type=='state')
{
$fetch_query = mysqli_query($connection,"select * from tbl_city where state_id='$s_id'");
}
else
{
$fetch_query = mysqli_query($connection,"select * from tbl_state where country_id='$c_id'");
}
$result = "";
while($res_arr = mysqli_fetch_array($fetch_query)){
$result .='<option value='.$res_arr['id'].'>'.$res_arr['name'].'</option>';
}
echo $result;
?>

Download Source Code

Infinity Scroll/Lazy Loading using AJAX in PHP and MySQL

How to get Country State City by IP Address in PHP

Subscribe us via Email

Join 10,000+ subscriber