How to do dynamic dependent select box using PHP, Mysql, Jquery and Ajax. Dependent select box when a selection is made in a “Parent” box it allow to refresh a “child” box list data. In this post I had given a database relationship example betweent “catergory” and “subcategory”. It’s very simple jquery code hope you like this.
Database
Sample database tables. Data table contains list boxes complete place, place_data table foreign key relationship with Data table contains parent and child relation.
--
-- Table structure for table `place`
--
CREATE TABLE IF NOT EXISTS `place` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`place_name` varchar(60) NOT NULL,
`weight` int(2) NOT NULL,
PRIMARY KEY (`id`)
)
--
-- Table structure for table `place_data`
--
CREATE TABLE IF NOT EXISTS `place_data` (
`pid` int(11) NOT NULL AUTO_INCREMENT,
`cid` int(11) NOT NULL,
`parent` int(11) DEFAULT NULL,
PRIMARY KEY (`pid`),
UNIQUE KEY `cid` (`cid`),
KEY `FK_Parent` (`parent`)
)Dumping data for table ‘place’
INSERT INTO `place` (`id`, `place_name`, `weight`) VALUES
(1, 'India', 1),
(2, 'Zimbabwe', 1),
(3, 'Sri Lanka', 1),
(4, 'United states', 1),
(5, 'United Kingdom', 1),
(6, 'Delhi', 0),
(7, 'Mumbai', 0),
(8, 'Kochi', 0),
(9, 'Kolkata', 0),
(10, 'Harare', 0),
(11, 'Bulawayo', 0),
(12, 'Chitungwiza', 0),
(13, 'Galkissa', 0),
(14, 'Moratuwa', 0),
(15, 'Jaffna', 0),
(16, 'Negombo', 0),
(17, 'New York', 0),
(18, 'Los Angeles', 0),
(19, 'Phoenix', 0),
(20, 'San Diego', 0),
(21, 'Bristol', 0),
(22, 'Newcastle', 0),
(23, 'Sunderland', 0),
(24, 'Wolverhampton', 0);Dumping data for table ‘place_data’
INSERT INTO `place_data` (`pid`, `cid`, `parent`) VALUES
(1, 1, 0),
(2, 2, 0),
(3, 3, 0),
(4, 4, 0),
(5, 5, 0),
(6, 6, 1),
(7, 7, 1),
(8, 8, 1),
(9, 9, 1),
(10, 10, 2),
(11, 11, 2),
(12, 12, 2),
(13, 13, 3),
(14, 14, 3),
(15, 15, 3),
(16, 16, 3),
(17, 17, 4),
(18, 18, 4),
(19, 19, 4),
(20, 20, 4),
(21, 21, 5),
(22, 22, 5),
(23, 23, 5),
(24, 24, 5);sections_demo.php
Contains javascipt and PHP code. $(“.country”).change(function(){}– country is the class name of select box. Using $(this).val() calling select box value. PHP code displaying results from data table where weight=’1′
<!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>Sections Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
</script>
<style>
label {
font-weight:bold;
padding:10px;
}
</style>
</head>
<body>
<div style="margin:80px">
<label>Country :</label>
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select id,place_name,weight from place where weight='1'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['place_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
} ?>
</select>
<br/>
<br/>
<label>City :</label>
<select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
</div>
</body>
</html>ajax_city.php
Contains PHP code. Displaying results from data and place_data tables
<?php
include('db.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select b.id,b.place_name from place_data a,place b where b.id=a.cid and parent='$id'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['place_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>
db.php
Contains PHP code.
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "demo"; // database name
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!