03-Apr-2023
.
Admin
Hi friends,
In this post, we will learn how to country state city dynamic dependent dropdown using Ajax and PHP. i explained simply step by step how to country state city using ajax and MySQL PHP dropdown example. Here you will learn dynamic country state dropdown in PHP and Ajax. This tutorial will give you simple example of Ajax dynamic dropdown for country, state and city list in PHP.
I will give you simple Example of How to country state city dynamic dependent select box in PHP.
So let's see bellow example:
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>Ajax Dynamic Dependent Country State City Dropdown in PHP - Nicesnippets.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 m-auto" style="width: 84%;">
<div class="card-header text-center bg-primary text-white">
<h3>Ajax Dynamic Dependent Country State City Dropdown in PHP - Nicesnippets.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:
I hope it will help you....
#PHP
