PHP AJAX Dependent Menu (Country and State Dropdown menu)

Hi Guys Today We will learn how to Create Dynamic Ajax 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 two tables named: country and state

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 fro 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');

1.create connect.php file.
2.create index.html file.
3.create script.js file.
4.create getstate.php file.
5.create style.css file.
6.download jquery_latest.js from 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>AJAX PHP Dependent Menu (Country and State)</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="success"></div>
 
<div>
</html>

3.Creating script.js file..

function getstate(value){
$.ajax({
 url:"getstate.php",
 type:"POST",
 data:{id:value},
 success: function(data){
  $("#success").html(data);
 }
});
return false;
}

4.Creating getstate.php file..

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

5. 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 using Ajax, PHP and MySQL. You can customize this codes further as per your requirement. feel free to give your comment on this tutorial.

Tag:

#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

Latest

Monday, December 18, 2017

PHP AJAX Dependent Menu (Country and State Dropdown menu)