Home >> PHP MySql Ajax >> Country State City Dropdown List in PHP MySql Ajax

Country State City Dropdown List in PHP MySql Ajax

Following steps to create dynamic dependent country state city dropdown list using PHP MySQL using Ajax:
Step 1: Create Country State City Table & Insert data.
Step 2: Create DB Connection.
Step 3: Create Html Form For Display Country, State and City Dropdown.
Step 4: Get States List by Country Id.
Step 5: Get Cities List by State Id.
Step 1:
Run the following sql query to create database and table:
CREATE DATABASE education;
 
CREATE TABLE `countries` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
CREATE TABLE `states` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `country_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
CREATE TABLE `cities` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `state_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
INSERT INTO `countries` VALUES (1, 'India', 1);
INSERT INTO `countries` VALUES (2, 'USA', 1);
 
INSERT INTO `states` VALUES (1, 1, 'Delhi', 1);
INSERT INTO `states` VALUES (2, 1, 'Uttar Pradesh', 1);
INSERT INTO `states` VALUES (3, 1, 'Bihar', 1);
INSERT INTO `states` VALUES (4, 2, 'New York', 1);
INSERT INTO `states` VALUES (5, 2, 'Los Angeles', 1);
 
INSERT INTO `cities` VALUES (1, 1, 'New Delhi', 1);
INSERT INTO `cities` VALUES (1, 2, 'Lucknow', 1);
INSERT INTO `cities` VALUES (1, 2, 'Allahabad', 1);
INSERT INTO `cities` VALUES (2, 3, 'Patna', 1);
INSERT INTO `cities` VALUES (3, 4, 'New York', 1);
INSERT INTO `cities` VALUES (4, 5, 'Los Angeles', 1);
 
Step 2:
Create database connection file named dbconnection.php
<?php
        $dbservername='localhost';
        $dbusername='root';
        $dbpassword='';
        $dbname = "education";
        $conn=mysqli_connect($dbservername,$dbusername,$dbpassword,$dbname);
        if(!$conn){
               die('Could not Connect MySql Server:' .mysql_error());
        }
?>
Step 3:
Create Country, State and City Dropdown in Form named index.php
<!doctype html>  
<html>  
<head>  
<title>Form</title>   
</head>  
<body>  
<h3>Form</h3>  
<form action="" method="POST">  
    <div class="form-group">
             <label for="Country">Country</label>
             <select class="form-control" id="category">
                        <option value="">Select Country</option>
                        <?php
                                require_once "dbconnection.php";
                                $result = mysqli_query($conn,"SELECT * FROM countries ORDER BY id ASC");
                                while($row = mysqli_fetch_array($result)) {
                         ?>
                          <option value="<?php echo $row['id'];?>"><?php echo $row["name"];?></option>
                         <?php
                               }
                         ?>
             </select>
      </div>
      <div class="form-group">
              <label for="State">State</label>
              <select class="form-control" id="state">
                      <option value="">Select Country First</option>
              </select>
       </div>
<div class="form-group">
              <label for="City">City</label>
              <select class="form-control" id="city">
                      <option value="">Select State First</option>
              </select>
       </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#country').on('change', function() {
       var country_id = $(this).val();
       $.ajax({
          url: "get-states-by-country.php",
          type: "POST",
          data: {country_id: country_id},
          cache: false,
          success: function(result){
              $("#state").html(result);
          }
       });
    });
    $('#state').on('change', function() {
       var state_id = $(this).val();
       $.ajax({
          url: "get-cities-by-state.php",
          type: "POST",
          data: {state_id: state_id},
          cache: false,
          success: function(result){
              $("#city").html(result);
          }
       });
    });
});
</script>  
</body>  
</html> 
Step 4: Get States in Dropdown List by country_id 
Now, create a new php file named get-states-by-country.php
<?php
  require_once "dbconnection.php";
  $country_id = $_POST["country_id"];
  $result = mysqli_query($conn,"SELECT * FROM states WHERE country_id = $country_id");
?>
<option value="">Select State</option>
<?php
  while($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
<?php
}
?>
Step 5: Get Cities in Dropdown List by state_id 
Now, create a new php file named get-cities-by-state.php
<?php
  require_once "dbconnection.php";
  $state_id = $_POST["state_id"];
  $result = mysqli_query($conn,"SELECT * FROM cities WHERE state_id = $state_id");
?>
<option value="">Select State</option>
<?php
  while($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
<?php
}
?>

Comments (1)
  • Rohit Sharma 19/May/2022

    Thanks Coderraj Very Good topic for Country State City Dropdown List.

Post Your Comment

Next Questions
Country State City Dependent Dropdown List
How to make Country State City Dropdown List
Contact Us Form Submit
Feedback Form Submit
Comment Form Submit
Register Form Submit
Login Form Submit
Enquiry Form Submit
Subscribe Form Submit
How to Upload File
How to Upload Multiple Files
How to Upload Image
How to Upload Multiple Image
Image Crop and Save into Database

Copyright ©2022 coderraj.com. All Rights Reserved.