Create a dropdown list using MySQL, PHP & JavaScript

Want to create a select the destination or address feature with the custom country, state and city selection drop down list? You are at the right place.

In this tutorial, I will show you how to create a dropdown list using MySQL, PHP, and JavaScript.

Also, we will be using AJAX to make the drop down list auto-populate the data without page refresh.

Overview

Further, You will need to save the following file and keep them in the same folder.

  • Dbconfig.php
  • findCity.php
  • findState.php
  • index.php

Database Schema

The code will help you create necessary tables to populate the data into the form. Create a database named “dropdowndb”  and then add the tables.

/* Create table country */

CREATE TABLE `country` (
`id` int NOT NULL AUTO_INCREMENT,
`country` varchar(20) NOT NULL default '',
PRIMARY KEY  (`id`)
)

/*create table state*/

CREATE TABLE `state` (
`id` int NOT NULL AUTO_INCREMENT,
`countryid` int(4) NOT NULL,
`statename` varchar(40) NOT NULL,
PRIMARY KEY  (`id`)
)

/* Create table city */

CREATE TABLE `city` (
`id` int NOT NULL AUTO_INCREMENT,
`city` varchar(50) default NULL,
`stateid` int(4) default NULL,
`countryid` int(4) NOT NULL,
PRIMARY KEY  (`id`)
)
/* Insert records into country table */

INSERT INTO `country` VALUES (1, 'USA');
INSERT INTO `country` VALUES (2, 'Canada');
/* Insert records into state table */

INSERT INTO `state` VALUES (1, 1, 'New York');
INSERT INTO `state` VALUES (2, 1, 'Los Angeles');
INSERT INTO `state` VALUES (3, 2, 'British Columbia');
INSERT INTO `state` VALUES (4, 2, 'Toranto');
/* Insert records into city table */

INSERT INTO `city` VALUES (1, 'Los Angales', 2, 1);
INSERT INTO `city` VALUES (2, 'New York', 1, 1);
INSERT INTO `city` VALUES (3, 'Toranto', 4, 2);
INSERT INTO `city` VALUES (4, 'Vancovour', 3, 2);

DbConfig.php

This file helps you to create a successful connection with the database. It contains the configuration needed to connect the form with a MySQL database.

<?php
$con = new mysqli('localhost', 'root', '',"dropdowndb");
if ($con->connect_errno) {
die('Could not connect: ' . $con->connect_error);
}

FindCity.php

The file contains the codes that will read the Country id and the state id from the URL using method GET.

Then, a SQL query is issued to fetch all the relevant data from the database. Using a loop It will iterate all over the data set and print it inside the drop down list.

<?php
include_once 'dbConfig.php';

$countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);

$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";
$result=$con->query($query);

?>
<select name="city">
<option>Select City</option>
<?php while($row=$result->fetch_array(MYSQLI_ASSOC)) { ?>
<option value=<?php echo $row['id']?>><?php echo $row['city']?></option>
<?php } ?>
</select>

FindState.php

Same as above this file will take the Country from the URL using method GET method.

Then, a SQL query is issued to fetch all the states relevant to that country from the database and it will be printed inside the relevant drop down list.

<?php
include_once 'dbConfig.php';

$country=intval($_GET['country']);

$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=$con->query($query);

?>
<select name="state" onchange="getCity(<?php echo $country?>,this.value)">
<option>Select State</option>
<?php while ($row=$result->fetch_array(MYSQLI_ASSOC)) { ?>
<option value=<?php echo $row['id']?>><?php echo $row['statename']?></option>
<?php } ?>
</select>

Index.php

This is the main page which will load all three drop down lists as well as the script, which is used to fetch data asynchronously is also embedded inside this page.

First, it will trigger the query for all the data in the Country table, those data will be shown in the relevant drop-down list. Then with user selection, other drop down lists will be populated.

<?php
include_once 'dbConfig.php';
$query="SELECT * FROM country";
$result= $con->query($query);
?>
<html>
<head>
<title>Tutorial-24</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e)   {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}

return xmlhttp;
}

function getState(countryId) {

var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
document.getElementById('citydiv').innerHTML='<select name="city">'+
'<option>Select City</option>'+
'</select>';
} else {
alert("Problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getCity(countryId,stateId) {
var strURL="findCity.php?country="+countryId+"&state="+stateId;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("Problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<center>
<table width="45%"  cellspacing="0" cellpadding="0">
<tr>
<td width="75">Country</td>
<td width="50">:</td>
<td  width="150"><select name="country" onChange="getState(this.value)">
<option value="">Select Country</option>
<?php while ($row=$result->fetch_array(MYSQLI_ASSOC)) { ?>
<option value=<?php echo $row['id']?>><?php echo $row['country']?></option>
<?php } ?>
</select></td>
</tr>
<tr style="">
<td>State</td>
<td width="50">:</td>
<td ><div id="statediv"><select name="state" >
<option>Select State</option>
</select></div></td>
</tr>
<tr style="">
<td>City</td>
<td width="50">:</td>
<td ><div id="citydiv"><select name="city">
<option>Select City</option>
</select></div></td>
</tr>

</table>
</center>
</form>
</body>
</html>

Bonus

You can download the complete working demo source code here:

I hope the tutorial helped you learn to Display country state city in a drop down menu.

I would love to solve your problem if any so don’t forget to comment. Also, appreciate if you shared the post with your friends.

 

Download the complete source code.

Grab the the free working demo Intantly!

You have Successfully Suscribed!

One thought on “Create a dropdown list using MySQL, PHP & JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *