I have three dropdown list which is country,state and city. At first, the country dropdown would be displayed with all countries. When a country would be chosen, the respective states would be fetched from the MySQL database and appear in the states dropdown. Alike when a state would be chosen, the respective cities will be fetched from the MySQL database and appear in the cities dropdown.

Below is the default display before I select country,state,city and click submit button.

After I select country, state, city and click submit button like below. It will refresh and go back to the default display.

So how can I keep the selected value(United Kingdom,England,London) display in the dropdown list instead it jump back to default display after clicked submit button?

Index.php

query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");

//Count total number of rows
$rowCount = $query->num_rows;
?>

    Select Country
     0){
        while($row = $query->fetch_assoc()){ 
            echo ''.$row['country_name'].'';
        }
    }else{
        echo 'Country not available';
    }
    ?>



    Select country first



    Select state first

ajaxData.php

query("SELECT * FROM states WHERE country_id IN (".$_POST['country_id'].")");

//Count total number of rows
$rowCount = $query->num_rows;

//Display states list
if($rowCount > 0){
    echo 'Select state';
    while($row = $query->fetch_assoc()){ 
        echo ''.$row['state_name'].'';
    }
}else{
    echo 'State not available';
}
}

if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){
//Get all city data
$query = $db->query("SELECT * FROM cities WHERE state_id IN(".$_POST["state_id"].")");

//Count total number of rows
$rowCount = $query->num_rows;

//Display cities list
if($rowCount > 0){
    echo 'Select city';
    while($row = $query->fetch_assoc()){ 
        echo ''.$row['city_name'].'';
    }
}else{
    echo 'City not available';
}
}
?>

dbConfig.php

connect_error) {
die("Connection failed: " . $db->connect_error);
}
?>