In this article we will learn how to use PHP to, when we select a country from a DropDownList, fill a DropDownList of states with the country's states and after selecting a state, fill a DropDownList of cities with the state's cities.
Table Creation
-- phpMyAdmin SQL Dump
-- version 2.10.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Feb 17, 2013 at 09:49 AM
-- Server version: 5.0.45
-- PHP Version: 5.2.5
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Database: `Work`
--
-- --------------------------------------------------------
--
-- Table structure for table `city`
--
CREATE TABLE `city` (
`CityId` varchar(255) NOT NULL,
`State_Id` int(11) NOT NULL,
`CityName` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `city`
--
INSERT INTO `city` (`CityId`, `State_Id`, `CityName`) VALUES
('1', 1, 'Bhubaneswar'),
('2', 2, 'Hyderbad'),
('3', 3, 'Kolkata'),
('4', 4, 'Mumbai'),
('5', 5, 'Calgary'),
('6', 5, 'Edmonton'),
('7', 5, 'Duffield'),
('8', 6, 'Phoenix'),
('9', 7, 'San Diego'),
('10', 8, 'Austin'),
('11', 9, 'Toronto');
-- --------------------------------------------------------
--
-- Table structure for table `country`
--
CREATE TABLE `country` (
`Country_Id` varchar(255) NOT NULL,
`CountryName` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `country`
--
INSERT INTO `country` (`Country_Id`, `CountryName`) VALUES
('1', 'India'),
('2', 'Usa'),
('3', 'Canada');
-- --------------------------------------------------------
--
-- Table structure for table `state`
--
CREATE TABLE `state` (
`StateId` varchar(255) NOT NULL,
`Country_Id` int(11) NOT NULL,
`StateName` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `state`
--
INSERT INTO `state` (`StateId`, `Country_Id`, `StateName`) VALUES
('7', 2, 'California'),
('1', 1, 'Orissa'),
('2', 1, 'Andhra Pradesh'),
('3', 1, 'West Bengal'),
('4', 1, 'Maharastra'),
('5', 3, 'Alberta'),
('6', 2, 'Arizona'),
('8', 2, 'Texas'),
('9', 3, 'Ontario');
Now let's move to Coding part
config.php
<?php
$host="localhost";
$username="root";
$password="";
$dbname="Work";
$con=mysql_connect("$host","$username","$password");
mysql_select_db("$dbname",$con);
?>
Country State City.php
<?php
include('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function showState(Country_Id)
{
document.frm.submit();
}
function showCity(State_Id)
{
document.frm.submit();
}
</script>
</head>
<body>
<form action="" method="post" name="frm" id="frm">
<table width="500" border="0">
<tr>
<td width="119">Country</td>
<td width="371">
<select name="Country_Id" id="Country_Id" onChange="showState(this.value);">
<option value="">--Select--</option>
<?php
$sql1="select * from country";
$sql_row1=mysql_query($sql1);
while($sql_res1=mysql_fetch_assoc($sql_row1))
{
?>
<option value="<?php echo $sql_res1["Country_Id"]; ?>" <?php if($sql_res1["Country_Id"]==$_REQUEST["Country_Id"]) { echo "Selected"; } ?>><?php echo $sql_res1["CountryName"]; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>State</td>
<td id="td_state">
<select name="state_id" id="state_id" onChange="showCity(this.value);">
<option value="">--Select--</option>
<?php
$sql="select * from state where Country_Id='$_REQUEST[Country_Id]'";
$sql_row=mysql_query($sql);
while($sql_res=mysql_fetch_assoc($sql_row))
{
?>
<option value="<?php echo $sql_res["StateId"]; ?>" <?php if($sql_res["State_Id"]==$_REQUEST["state_id"]) { echo "Selected"; } ?>><?php echo $sql_res["StateName"]; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>City</td>
<td id="td_city">
<select name="city_id" id="city_id">
<option value="">--Select--</option>
<?php
$sql="select * from city where State_Id='$_REQUEST[state_id]'";
$sql_row=mysql_query($sql);
while($sql_res=mysql_fetch_assoc($sql_row))
{
?>
<option value="<?php echo $sql_res["State_Id"]; ?>"><?php echo $sql_res["CityName"]; ?></option>
<?php
}
?>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Running the application
Run the WampServer, then write the following line in the URL:
http://localhost/Country State City/
![dropdownlistinphp.gif]()
![dropdownlistinphp1.gif]()
When Maharashtra is selected, the corresponding city Mumbai appears in the list.