Country State City Dropdown using Ajax in PHP MySQL

Do you want to create a dependent country-state-city dropdown in your application? I will provide you a free download for PHP ajax-based dependent dropdown code. It loads the data from the database (MYSQL) which depends on the parent entity selected.

AJAX is not mandatory for implementing dependent dropdowns in an application. We can also submit the form with the selected data to get the dependent data result. But, it will give a good user experience with Ajax as compared to form submission. We should be sure of the importance of using AJAX before coding it. Because unnecessary AJAX usage is an overload for an application.

This ajax country state city dropdown list using PHP and MYSQL(dynamic) would look like this:

Next follow the simple and easy steps given below to retrieve and display country, state and city dropdown list in PHP using jQuery AJAX from MySQL database:

Create Country State City Table

I have created database for you country, state and city. Here you will find all the country’s states and their cities in the world. and Next , Run this following sql query to create city table into your database:

Click here to Create Country State City Table ->

Create DB Connection PHP File

In this step, you have to create a file name config.php and add the following code into config.php file:

<?php
  $conn= mysqli_connect("localhost","root","","dependent_dropdown");
 ?>

Note: I have created this project in localhost and in my case I have not given the password of the database so I have kept the password blank here. and in the last you have to give the name of your database name in my case database name is dependent_dropdown.

Html Form For Display Country, State and City Dropdown

In this step, you have to create an file called index.php file and update the below PHP and HTML code into index.php file.

<!DOCTYPE html>
<html>
   <head>
      <title>PHP populate dynamic dropdown example</title>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <style>
         .form_container{
         border:1px solid grey;
         background-color: #F8F9F9;
         margin: 5%;
         padding: 2%;
         border-radius: 3px;
         }
      </style>
   </head>
   <body>
      <div class="container" style="width:900px; margin-left: 25%;">
         <div class="form_container">
            <h2 align="center">Country State City Dropdown using Ajax in PHP MySQL</h2>
            <br />  
            <div ng-app="myapp" >
               <select name="country" id="country" class="form-control">
                  <option value=""> Select country</option>
                  <?php 
                     include('config.php');
                     $query= "select * from countries order by name ASC";
                     $result= mysqli_query($conn,$query);
                     while ($row= mysqli_fetch_array($result)) { ?>
                  <option value="<?php echo $row['id']; ?>"><?php echo $row['name'] ?></option>
                  <?php } ?>
               </select>
               <br/>
               <select name="state" class="form-control" id="state">
                  <option value=""> Select state</option>
               </select>
               <br/>
               <select name="city" id="city" ng-model="city" class="form-control" >
                  <option value=""> Select city</option>
                  <option ng-repeat="city in cities" value="{{city.id}}}">{{city.name}}</option>
               </select>
            </div>
         </div>
      </div>
      </div>    
   </body>
</html>
<script>
   $(document).ready(function(){

    $("#country").change(function(){
      var country_id = this.value;
      $.ajax({
      url: "state.php",
      type: "POST",
      data: {
      country_id: country_id
      },
      cache: false,
      success: function(result){     
        $("#state").html(result);
        $('#city').html('<option value="">Select State First</option>'); 
      }
      });    
    });   
   
    $("#state").change(function(){
      var state_id = this.value;
      $.ajax({
      url: "city.php",
      type: "POST",
      data: {
      state_id: state_id
      },
      cache: false,
      success: function(result){
        $("#city").html(result);   
      }
      });    
    });
   });
</script>

Get States by Selected Country from MySQL

Now create a new state.php file inside your project . in this file Php script code will fetch and display all states according to selected country . to update the following PHP and Html code into the state.php file:

<?php 
include('config.php');

$country_id = $_POST['country_id'];
$query= "select * from states where country_id='".$country_id."' order by name ASC";
$result= mysqli_query($conn,$query);

while ($row= mysqli_fetch_array($result)) {
	?>
	<option value='<?php echo $row['id'] ?>'><?php echo $row['name']; ?></option>;
<?php } ?>

Get Cities by Selected State from MySQL

Now create a new city.php file inside your project . in this file Php script code will fetch and display all cities according to selected state . to update the following PHP and Html code into the city.php file:

<?php 
include('config.php');

$state_id = $_POST['state_id'];
$query= "select * from cities where state_id='".$state_id."' order by name ASC";
$result= mysqli_query($conn,$query);

while ($row= mysqli_fetch_array($result)) {
	?>
	<option value='<?php echo $row['id'] ?>'><?php echo $row['name']; ?></option>;
<?php } ?>

Conclusion

PHP get country state and city dropdown list using ajax, you have learned how to dynamic populating states, aPHP get country status and city dropdown list using Ajax You have learned how to dynamically populate states and cities in dropdown list based on country and states selected in PHP MySQL using Ajax.