Country State City Dropdown list in PHP MySQL and Ajax

Mar 31, 2022 . Admin



Hello dev,

I am going to explain you How to country state city dropdown list in PHP MySQL Ajax. You will learn country state city Ajax MySQL PHP dropdown example. In side this article we will see country state city dropdown list using PHP MySQL and Ajax.

This article will give you simple example of country state city selection Ajax in PHP. We will use get simple ajax country state city dropdown using PHP & MySQL (dynamic).

I will give you simple Example of How to dynamic dropdown for country and city list in PHP MySQL and Ajax.

So, let's see bellow solution:

db.php
<?php
    $servername = 'localhost';
    $username = 'root';
    $password = '';
    $dbname = "demos";

    $conn = mysqli_connect($servername,$username,$password,"$dbname");
    
    if(!$conn){
        die('Could not Connect MySql Server:' .mysql_error());
    }
?>
index.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Country State City Dropdown List in PHP MySQL Ajax - Mywebtuts.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card w-75 m-auto">
                    <div class="card-header text-center bg-primary text-white">
                        <h3>Country State City Dropdown List in PHP MySQL Ajax - Mywebtuts.com</h2>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="mb-2">
                                <label for="country"><strong>Country : </strong><span class="text-danger">*</span></label>
                                <select class="form-select" id="country-dropdown">
                                    <option value="">Select Country</option>
                                    <?php
                                        require_once "db.php";
                                        $result = mysqli_query($conn,"SELECT * FROM countries");
                                        while($row = mysqli_fetch_array($result)) {
                                    ?>
                                    <option value="<?php echo $row['id'];?>"><?php echo $row["name"];?></option>
                                    <?php
                                        }
                                    ?>
                                </select>
                            </div>
                            <div class="mb-2">
                                <label for="state"><strong>State : </strong><span class="text-danger">*</span></label>
                                <select class="form-select" id="state-dropdown"></select>
                            </div>                        
                            <div class="mb-2">
                                <label for="city"><strong>City : </strong><span class="text-danger">*</span></label>
                                <select class="form-select" id="city-dropdown"></select>
                            </div>
                        </form> 
                    </div>
                </div>
            </div>
        </div>
    </div> 
    <script>
        $(document).ready(function() {
            $('#country-dropdown').on('change', function() {
                var country_id = this.value;
                $.ajax({
                    url: "states-by-country.php",
                    type: "POST",
                    data: {
                        country_id: country_id
                    },
                    cache: false,
                    success: function(result){
                        $("#state-dropdown").html(result);
                        $('#city-dropdown').html('<option value="">Select State First</option>'); 
                    }
                });
            });

            $('#state-dropdown').on('change', function() {
                var state_id = this.value;
                $.ajax({
                    url: "cities-by-state.php",
                    type: "POST",
                    data: {
                        state_id: state_id
                    },
                    cache: false,
                    success: function(result){
                        $("#city-dropdown").html(result);
                    }
                });
            });
        });
    </script>
</body>
</html>
states-by-country.php
<?php
    require_once "db.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
        }
    ?>
cities-by-state.php
<?php
    require_once "db.php";
    $state_id = $_POST["state_id"];

    $result = mysqli_query($conn,"SELECT * FROM cities where state_id = $state_id");
?>
    <option value="">Select City</option>
    
    <?php
        while($row = mysqli_fetch_array($result)) {
    ?>
            <option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
    <?php
        }
    ?>
Output:

It will help you...
#PHP