Because usability studies show that drop-down lists are the most efficient way of selecting a country and a state, I created an extensible plugin using jQuery to provide this functionality. The plugin has two options: by country/state or by country/state/city. If you’re one of those people who like older technologies like flash, then I suggest you go to the Jquery Plugin for Country State City Dropdown Flash Version
Need to create a country dropdown for your website? WordPress plugin country states and city has you covered!
Have you ever wanted to create a country select drop-down in your web forms? I was in the same boat as you until I came across this great tutorial by Sticky Brain. It is by far the simplest and most straightforward way to achieve that functionality.
Jquery Plugin For Country State City Dropdown
Implementation of Database and Tables:
First you need to create a Database name location. After creating database (location), you will have to create three Table countries, states and cities.
Here Table countries has relation with Table states through country_id and states has relation with Table cities through state_id.
countries (table):
This table contains two columns (country_id, country_name). To create this table you will have to execute code that is given below:
CREATE TABLE `countries` ( `country_id` int(12) NOT NULL, `country_name` varchar(40) CHARACTER SET utf8 NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
states (table):
This table contains three columns (state_id, state_name, country_id). To create this table you will have to execute code that is given below:
CREATE TABLE `states` ( `state_id` int(11) NOT NULL, `state_name` varchar(30) COLLATE utf8_unicode_ci NOT NULL, `country_id` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
cities (table):
This table contains three columns (city_id, city_name, state_id). To create this table you will have to execute code that is given below:
CREATE TABLE `cities` ( `city_id` int(11) NOT NULL, `city_name` varchar(30) COLLATE utf8_unicode_ci NOT NULL, `state_id` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
config.php:
This PHP file is used to connect and use the database (location).
<?php
$con=mysqli_connect('localhost','root','','location');
if ($con->connect_error) {
die("Database Connection failed: " . $con->connect_error);
}
?>
index.html:
In this file I have used JavaScript, Jquery Library and some Php code. I have used JavaScript code to getting data of state and city from ajaxFile.php using help of Ajax. It also displays the returned HTML of ajaxFile.php file to the respective selct box.
<html>
<head>
<style type="text/css">
select {
width: 300px;
}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#country').on('change',function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxFile.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
}
});
$('#state').on('change',function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxFile.php',
data:'state_id='+stateID,
success:function(html){
$('#city').html(html);
}
});
}else{
$('#city').html('<option value="">Select state first</option>');
}
});
});
</script>
</head>
<body>
<center>
<div style='margin-top:50px;'>
<img src="https://www.coderglass.com/images/logo.png"><br>
<h4>Varun Singh's Tech Blog</h4>
<h2>Country, State and City dropdown box using jquery in Php.</h2>
<br>
<?php
//Include database configuration file
include('config.php');
//Get all country data
$query = "SELECT * FROM countries ORDER BY country_name ASC";
$run_query = mysqli_query($con, $query);
//Count total number of rows
$count = mysqli_num_rows($run_query);
?>
<select name="country" id="country">
<option value="">Select Country</option>
<?php
if($count > 0){
while($row = mysqli_fetch_array($run_query)){
$country_id=$row['country_id'];
$country_name=$row['country_name'];
echo "<option value='$country_id'>$country_name</option>";
}
}else{
echo '<option value="">Country not available</option>';
}
?>
</select><br><br>
<select name="state" id="state">
<option value="">Select country first</option>
</select>
<br><br>
<select name="city" id="city">
<option value="">Select state first</option>
</select>
</div>
</center>
</body>
</html>
ajaxFile.php:
This file is called by the Ajax and we get state name and city name from the database according to country_id and state_id. This file also returns select options HTML to the Ajax function.
<?php
//Include database configuration file
include('config.php');
if(isset($_POST["country_id"])){
//Get all state data
$country_id= $_POST['country_id'];
$query = "SELECT * FROM states WHERE country_id = '$country_id'
ORDER BY state_name ASC";
$run_query = mysqli_query($con, $query);
//Count total number of rows
$count = mysqli_num_rows($run_query);
//Display states list
if($count > 0){
echo '<option value="">Select state</option>';
while($row = mysqli_fetch_array($run_query)){
$state_id=$row['state_id'];
$state_name=$row['state_name'];
echo "<option value='$state_id'>$state_name</option>";
}
}else{
echo '<option value="">State not available</option>';
}
}
if(isset($_POST["state_id"])){
$state_id= $_POST['state_id'];
//Get all city data
$query = "SELECT * FROM cities WHERE state_id = '$state_id'
ORDER BY city_name ASC";
$run_query = mysqli_query($con, $query);
//Count total number of rows
$count = mysqli_num_rows($run_query);
//Display cities list
if($count > 0){
echo '<option value="">Select city</option>';
while($row = mysqli_fetch_array($run_query)){
$city_id=$row['city_id'];
$city_name=$row['city_name'];
echo "<option value='$city_id'>$city_name</option>";
}
}else{
echo '<option value="">City not available</option>';
}
}
?>