We often see dynamic dependent select box in website, which are part of web form. Today i will share how to use dynamic dependent select box using jQuery and ajax. I will use an example of country and city, when you will select any country, its cities will be available in the below select box without refresh or reload the page this is the power of Ajax.
Steps to Create Dynamic Dependent Select Box using jQuery and Ajax
- Create a Database
- Create Two Tables of County and City and Insert Data in Both Table
- Create a Database Connection File
- Create Index File Which Using JQuery and Ajax
- Create PHP Action File
1. Create a Database
Create a database with name parent_child_select. For this purpose run the following query in MySQL.
|
|
CREATE DATABASE parent_child_select;
|
2. Create Two Tables of County and City and Insert Data in Both Table
Create two tables with name county and city and insert sample data in database by using the following queries. For your ease i have also attached the SQL file in download file just import this file in SQL and it will create tables with sample data.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
CREATE TABLE IF NOT EXISTS `country` (
`country_id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(50) NOT NULL,
PRIMARY KEY (`country_id`)
);
CREATE TABLE IF NOT EXISTS `city` (
`city_id` int(11) NOT NULL AUTO_INCREMENT,
`city_name` varchar(50) NOT NULL,
`country_id` varchar(50) NOT NULL,
PRIMARY KEY (`city_id`)
);
INSERT INTO `city` (`city_id`, `city_name`, `country_id`) VALUES
(1, 'Karachi', '1'),
(2, 'Lahore', '1'),
(3, 'Jeddah', '2'),
(4, 'Riyadh', '2'),
(5, 'London', '3'),
(6, 'Liverpool', '3');
INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'Pakistan'),
(2, 'Saudi Arabia'),
(3, 'United Kingdom');
|
3. Create a Database Connection File
Create a file with name db.php and copy paste the below code in that file. Make sure that you changed your database, username, password and host.
|
|
<?php
// Enter your Host, username, password, database below.
// I left password empty because i do not set password on localhost.
$con = mysqli_connect("localhost","root","","parent_child_select");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
|
4. Create Index File Which Using JQuery and Ajax
Create a file with name index.php and copy paste the below code in this file. Note that I have added the jQuery and Ajax script in the footer of this file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<html>
<head>
<title>Dynamic Dependent Select Box using jQuery and Ajax</title>
</head>
<body>
<div>
<label>Country :</label><select name="country" class="country">
<option value="0">Select Country</option>
<?php
include('db.php');
$sql = mysqli_query($con,"SELECT * FROM country");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
} ?>
</select><br/><br/>
<label>City :</label><select name="city" class="city">
<option>Select City</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var country_id=$(this).val();
var post_id = 'id='+ country_id;
$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(cities)
{
$(".city").html(cities);
}
});
});
});
</script>
</body>
</html>
|
5. Create PHP Action File
Create a file with name ajax.php and paste the below script there.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?php
include('db.php');
if($_POST['id']){
$id=$_POST['id'];
if($id==0){
echo "<option>Select City</option>";
}else{
$sql = mysqli_query($con,"SELECT * FROM `city` WHERE country_id='$id'");
while($row = mysqli_fetch_array($sql)){
echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
}
}
}
?>
|
If you found this tutorial helpful so share it with your friends, developer groups and leave your comment.
No comments:
Post a Comment