PHP AJAX 3 Level Dependent Menu (Country,State and City Dropdown menu)

AJAX Multi level Dropdown

Hi Guys Today We will learn how to Create Dynamic Ajax 3 Level Dependent Menu help of MySQL Database.
Also Learn
1. PHP MySQL Pagination
2. PHP MySQL Login with SESSION
3. php mysql comment system
4. sort MySQL table column using PHP

5. PHP MySQL Shopping Cart

What you need..

First create a database named: test
create 3 tables named: country,state and City

Now use The below SQL Commands to Create a table(country) and Insert some country name:
SQL for Creating Table country

CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `country` varchar(50) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

SQL for Inserting/Dumping Country Name

INSERT INTO `country` (`id`, `country`) VALUES
(1, 'India'),
(2, 'United States'),
(3, 'Canada'),
(4, 'Austrailia');

Now use The below SQL Commands to Create a table(state) and Insert some state name:
SQL for Creating Table state

CREATE TABLE IF NOT EXISTS `state` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `countryid` varchar(50) NOT NULL,
  `state` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;

SQL for Inserting/Dumping state Name

INSERT INTO `state` (`id`, `countryid`, `state`) VALUES
(1, '1', 'West Bengal'),
(2, '1', 'Maharastra'),
(3, '1', 'Delhi'),
(4, '1', 'Tamil Nadu'),
(5, '2', 'California'),
(6, '2', 'Alaska'),
(7, '2', 'Washington'),
(8, '2', 'New Jersey'),
(9, '2', 'New York'),
(10, '2', 'Texas'),
(11, '3', 'Ontario'),
(12, '3', 'British Columbia'),
(13, '4', 'New South Wales'),
(14, '4', 'Victoria');

Now use The below SQL Commands to Create a table(city) and Insert some city name:
SQL for Creating Table city

CREATE TABLE IF NOT EXISTS `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `stateid` varchar(20) NOT NULL,
  `city` varchar(20) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=latin1;

SQL for Inserting/Dumping city Name

INSERT INTO `city` (`id`, `stateid`, `city`) VALUES
(1, '1', 'Kolkata'),
(2, '1', 'Salt Lake'),
(3, '2', 'Mumbai'),
(4, '2', 'Pune'),
(5, '3', 'New Delhi'),
(6, '3', 'Gokal Pur'),
(7, '4', 'Chennai'),
(8, '4', 'Salem'),
(9, '5', 'Los Angeles'),
(10, '5', 'San Francisco'),
(11, '6', 'Anchorage'),
(13, '7', 'Tacoma'),
(14, '7', 'Olympia'),
(15, '8', 'Atlantic City'),
(16, '9', 'New York City'),
(17, '10', 'Houston'),
(18, '14', 'Melbourne');

1.create connect.php file.
2.create index.html file.
3.create script.js file.
4.create getstate.php file.
5.create getcity.php file.
6.create style.css file.
7.download jquery_latest.js form jquery official website..
1.Creating connect.php to connect database.

<?php
$conn=new mysqli('localhost','root','','test');
?>

2.Creating index.php file..

<html>
<head>
<title>AJAX PHP Dependent Menu (Country and State)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div id="content">
<h2>PHP AJAX Dependent Menu(Country,State and City)</h2>
<select onchange="getstate(value)">
   <option>Select Country</option>
  <?php
  include("connect.php");
  $result=mysqli_query($conn,"SELECT*FROM country");
  while($row=$result->fetch_array()){?>
   <option value="<?php echo $row['id'];?>"><?php echo $row['country'];?></option>
 
<?php } ?>
</select>
<div id="state"></div>
<div id="city"></div>
 
</div>
 
</html>

3.Creating script.js file..

function getstate(value){
$.ajax({
 url:"getstate.php",
 type:"POST",
 data:{id:value},
 success: function(data){
  $("#state").html(data);
  $("#city").hide();
 }
});
return false;
}
//Getting City By State
function getcity(value){
$.ajax({
 url:"getcity.php",
 type:"POST",
 data:{id:value},
 success: function(data){
  $("#city").html(data);
  $("#city").show(500);
 }
});
return false;
}

4.Creating getstate.php file..

 
 <select onchange="getcity(value)">
  <option>Select State</option>
<?php
   include("connect.php");
   if(isset($_POST['id'])){
   $id=$_POST['id'];
   $result=mysqli_query($conn,"SELECT*FROM state WHERE countryid='$id'");
   while($row=$result->fetch_array()){?>
    <option value="<?php echo $row['id'];?>"><?php echo $row['state'];?></option>
  
   <?php }} ?>
  </select>

5.Creating getcity.php file..

<select>
  <option>Select City</option>
<?php
   include("connect.php");
   if(isset($_POST['id'])){
   $id=$_POST['id'];
   $result=mysqli_query($conn,"SELECT*FROM city WHERE stateid='$id'");
   while($row=$result->fetch_array()){?>
    <option><?php echo $row['city'];?></option>
  
   <?php }} ?>
  </select>

6.style.css codes...

#content{
 width:560px;
 height:200px;
 background:#66ccff;
 margin:auto;
 text-align:center;
}
select{
 padding:5px;
 font-size:20px;
 font-weight:bold;
 color:green;
 width:200px;
 cursor:pointer;
}
 
#success{
 padding:5px;
 
}

That's all, this is how to create dynamic Dependent menu(3 Level Dependent Menu) using Ajax, PHP and MySQL. You can customize this codes further as per your requirement. feel free to give your comment on this tutorial.
also learn..

#PHP AJAX Dependent Menu (Country and State Dropdown menu),PHP AJAX Dropdown Menu,#AJAX Dependent Menu,#AJAX Dependent Dropdown,#AJAX Dependent Dropdown with PHP,#country state city drop down list using ajax in php,dependent dropdown in php using mysql data,#multiple drop down list in php using ajax,#two dependent dropdown in php,

#dependent drop down list
PHP AJAX 3 Level Dependent Menu (Country,State and City Dropdown menu)

Latest

Monday, December 18, 2017

PHP AJAX 3 Level Dependent Menu (Country,State and City Dropdown menu)