Skip to content

Commit 57a048c

Browse files
Viv31Viv31
committed
Updated Code
0 parents  commit 57a048c

File tree

10 files changed

+343
-0
lines changed

10 files changed

+343
-0
lines changed

‎config/config.php

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?php
2+
$db_host = "localhost";
3+
$db_user = "root";
4+
$db_pass = "";
5+
$db_name = "dependent_dropdown";
6+
$conn = mysqli_connect($db_host,$db_user,$db_pass,$db_name);
7+
if($conn){
8+
//echo "Connected";
9+
10+
}
11+
else{
12+
echo "failed";
13+
}
14+
15+
?>

‎dependent_dropdown.sql

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
-- phpMyAdmin SQL Dump
2+
-- version 4.9.2
3+
-- https://www.phpmyadmin.net/
4+
--
5+
-- Host: 127.0.0.1
6+
-- Generation Time: May 28, 2020 at 12:23 PM
7+
-- Server version: 10.4.11-MariaDB
8+
-- PHP Version: 7.3.13
9+
10+
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11+
SET AUTOCOMMIT = 0;
12+
START TRANSACTION;
13+
SET time_zone = "+00:00";
14+
15+
16+
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
17+
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
18+
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
19+
/*!40101 SET NAMES utf8mb4 */;
20+
21+
--
22+
-- Database: `dependent_dropdown`
23+
--
24+
25+
-- --------------------------------------------------------
26+
27+
--
28+
-- Table structure for table `city`
29+
--
30+
31+
CREATE TABLE `city` (
32+
`id` int(11) NOT NULL,
33+
`city_name` varchar(100) NOT NULL,
34+
`state_id` int(11) NOT NULL,
35+
`country_id` int(11) NOT NULL
36+
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
37+
38+
--
39+
-- Dumping data for table `city`
40+
--
41+
42+
INSERT INTO `city` (`id`, `city_name`, `state_id`, `country_id`) VALUES
43+
(1, 'MUMBAI', 3, 1),
44+
(2, 'PUNE', 3, 1),
45+
(3, 'NASIK', 3, 1),
46+
(4, 'SATARA', 3, 1),
47+
(5, 'BHOPAL', 1, 1),
48+
(6, 'UJJAIN', 1, 1),
49+
(7, 'INDORE', 1, 1),
50+
(8, 'GWALIOR', 1, 1),
51+
(9, 'MIAMI', 2, 2),
52+
(10, 'TAMPA', 2, 2);
53+
54+
-- --------------------------------------------------------
55+
56+
--
57+
-- Table structure for table `country`
58+
--
59+
60+
CREATE TABLE `country` (
61+
`id` int(11) NOT NULL,
62+
`country_name` varchar(100) NOT NULL
63+
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
64+
65+
--
66+
-- Dumping data for table `country`
67+
--
68+
69+
INSERT INTO `country` (`id`, `country_name`) VALUES
70+
(1, 'INDIA'),
71+
(2, 'USA');
72+
73+
-- --------------------------------------------------------
74+
75+
--
76+
-- Table structure for table `state`
77+
--
78+
79+
CREATE TABLE `state` (
80+
`id` int(11) NOT NULL,
81+
`state_name` varchar(100) NOT NULL,
82+
`country_id` int(11) NOT NULL
83+
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
84+
85+
--
86+
-- Dumping data for table `state`
87+
--
88+
89+
INSERT INTO `state` (`id`, `state_name`, `country_id`) VALUES
90+
(1, 'MP', 1),
91+
(2, 'Florida', 2),
92+
(3, 'MH', 1),
93+
(4, 'UP', 1);
94+
95+
--
96+
-- Indexes for dumped tables
97+
--
98+
99+
--
100+
-- Indexes for table `city`
101+
--
102+
ALTER TABLE `city`
103+
ADD PRIMARY KEY (`id`);
104+
105+
--
106+
-- Indexes for table `country`
107+
--
108+
ALTER TABLE `country`
109+
ADD PRIMARY KEY (`id`);
110+
111+
--
112+
-- Indexes for table `state`
113+
--
114+
ALTER TABLE `state`
115+
ADD PRIMARY KEY (`id`);
116+
117+
--
118+
-- AUTO_INCREMENT for dumped tables
119+
--
120+
121+
--
122+
-- AUTO_INCREMENT for table `city`
123+
--
124+
ALTER TABLE `city`
125+
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
126+
127+
--
128+
-- AUTO_INCREMENT for table `country`
129+
--
130+
ALTER TABLE `country`
131+
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
132+
133+
--
134+
-- AUTO_INCREMENT for table `state`
135+
--
136+
ALTER TABLE `state`
137+
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
138+
COMMIT;
139+
140+
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
141+
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
142+
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

‎fetch_city.php

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
include('config/config.php');
3+
if(!empty($_POST["id"])){
4+
5+
$select_category="SELECT * FROM city WHERE state_id='".$_POST['id']."'";
6+
7+
$res=mysqli_query($conn,$select_category);
8+
$rowCount = mysqli_num_rows($res);
9+
10+
if($rowCount > 0){
11+
echo '<option value="">Select City</option>';
12+
13+
while($row =mysqli_fetch_array($res)){
14+
15+
echo '<option value="'.$row['id'].'">'.$row['city_name'].'</option>';
16+
}
17+
}
18+
else{
19+
echo '<option value="">DATA NOT AVAILABLE</option>';
20+
}
21+
22+
23+
}
24+
25+
?>

‎fetch_country.php

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
include('config/config.php');
3+
if(!empty($_POST["id"])){
4+
5+
$select_category="SELECT * FROM state WHERE country_id='".$_POST['id']."'";
6+
7+
$res=mysqli_query($conn,$select_category);
8+
$rowCount = mysqli_num_rows($res);
9+
10+
if($rowCount > 0){
11+
echo '<option value="">Select State</option>';
12+
13+
while($row =mysqli_fetch_array($res)){
14+
15+
echo '<option value="'.$row['id'].'">'.$row['state_name'].'</option>';
16+
}
17+
}
18+
else{
19+
echo '<option value="">not available</option>';
20+
}
21+
22+
23+
}
24+
25+
?>

‎img/pic1.jpg

84.1 KB
Loading

‎img/pic2.jpg

87.5 KB
Loading

‎img/pic8.jpg

91.3 KB
Loading

‎inc/footer.php

Whitespace-only changes.

‎inc/header.php

Whitespace-only changes.

‎index.php

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<?php
2+
require_once('config/config.php');
3+
4+
5+
$select_country="SELECT * FROM country ORDER BY country_name ASC";
6+
$res=mysqli_query($conn,$select_country);
7+
$rowCount = mysqli_num_rows($res);
8+
9+
10+
?>
11+
<!DOCTYPE html>
12+
<html lang="en">
13+
<head>
14+
<title>Dependent Dropdown by AJAX</title>
15+
<meta charset="utf-8">
16+
<meta name="viewport" content="width=device-width, initial-scale=1">
17+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
18+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
19+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
20+
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
21+
<style type="text/css">
22+
body{
23+
background-image: url('img/pic8.jpg');
24+
background-size: cover;
25+
background-repeat: no-repeat;
26+
27+
}
28+
#form_box{
29+
background-color: rgba(0,0,0,0.7);
30+
padding: 15px;
31+
margin-top: 100px;
32+
border-radius: 10px;
33+
box-shadow: 5px 5px 10px 10px white;
34+
color: white;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<div class="container-fluid">
40+
<div class="container">
41+
<div class="row">
42+
<div class="col-md-4"></div>
43+
<div class="col-md-4" id="form_box">
44+
<div class="form-group">
45+
<label>Country:</label>
46+
<select class="form-control" id="country" name="country">
47+
<option value="">---SELECT COUNTRY---</option>
48+
<?php
49+
if($rowCount > 0){
50+
while($row = mysqli_fetch_array($res)){
51+
echo '<option value="'.$row['id'].'">'.$row['country_name'].'</option>';
52+
}
53+
}else{
54+
echo '<option value="">Category not available</option>';
55+
}
56+
?>
57+
58+
</select>
59+
</div>
60+
61+
<div class="form-group">
62+
<label>State:</label>
63+
<select class="form-control" id="state" name="country">
64+
<option value="">---SELECT COUNTRY FIRST---</option>
65+
66+
67+
</select>
68+
</div>
69+
70+
<div class="form-group">
71+
<label>City:</label>
72+
<select class="form-control" id="city" name="country">
73+
<option value="">---SELECT City---</option>
74+
75+
</select>
76+
</div>
77+
78+
</div>
79+
<div class="col-md-4"></div>
80+
81+
</div>
82+
</div>
83+
</div>
84+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
85+
<script type="text/javascript">
86+
87+
$(document).ready(function(){
88+
$('#country').on('change',function(){
89+
var countryID = $(this).val();
90+
if(countryID){
91+
$.ajax({
92+
type:'POST',
93+
url:'fetch_country.php',
94+
data:'id='+countryID,
95+
success:function(html){
96+
$('#state').html(html);
97+
98+
}
99+
});
100+
}else{
101+
$('#state').html('<option value="">Select category first</option>');
102+
103+
}
104+
});
105+
106+
107+
});
108+
</script>
109+
<script type="text/javascript">
110+
$(document).ready(function(){
111+
$('#state').on('change',function(){
112+
113+
var stateID = $(this).val();
114+
if(stateID){
115+
$.ajax({
116+
type:'POST',
117+
url:'fetch_city.php',
118+
data:'id='+stateID,
119+
success:function(html){
120+
$('#city').html(html);
121+
122+
}
123+
});
124+
}else{
125+
$('#city').html('<option value="">Select State first</option>');
126+
127+
}
128+
});
129+
130+
131+
});
132+
133+
</script>
134+
135+
</body>
136+
</html>

0 commit comments

Comments
 (0)