Introduction
Here in the first ComboBox we have a category listing, which will show from the database dynamically, and in the second ComboBox we have a company listing. When a user selects the category ComboBox then all related records for that category will be bound to the company ComboBox dynamically.
Table Structure
phpMyAdmin SQL Dump
version 2.10.1
http://www.phpmyadmin.net
Host: localhost
Generation Time: May 21, 2012 at 04:20 AM
Server version: 5.0.45
PHP Version: 5.2.5
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
Database: `Work`
Table structure for table `category`
CREATE TABLE `category` (
`id` bigint(11) NOT NULL auto_increment,
`category_name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=20 ;
Dumping data for table "category":
INSERT INTO `category` (`id`, `category_name`) VALUES
(9, 'Electronics'),
(2, 'Mobiles'),
(3, 'Camera'),
(10, 'Home & Kitchen'),
(11, 'Apparel'),
(12, 'Gifts'),
(13, 'Appliances'),
(19, 'Medicine');
Table structure for table "company":
CREATE TABLE `company`
(
`id` bigint(11) NOT NULL auto_increment,
`cat_id` int(11) NOT NULL,
`company_name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=34 ;
Dumping data for table "company":
INSERT INTO `company` (`id`, `cat_id`, `company_name`) VALUES
(1, 2, 'Samsung'),
(2, 2, 'Nokia'),
(3, 2, 'LG'),
(6, 11, 'Rebook'),
(7, 11, 'Denim'),
(8, 11, 'Nike'),
(9, 13, 'Philips'),
(10, 13, 'Prestige'),
(11, 3, 'Nikon'),
(12, 3, 'Cannon'),
(13, 3, 'Sony'),
(14, 9, 'Tohsiba'),
(15, 9, 'Panasonic'),
(16, 12, 'Dinner Set'),
(31, 19, 'Generic'),
(18, 10, 'Samsung'),
(19, 10, 'LG'),
(30, 19, 'Branded'),
(32, 19, 'Ayurvedic '),
(29, 19, 'OTC'),
(33, 19, 'homeopethic');
Code Part
config.php
<?php
$host="localhost";
$username="root";
$password="";
$dbname="Work";
$con=mysql_connect("$host","$username","$password");
mysql_select_db("$dbname",$con);
?>
combo.php
<?php
include('config.php');
?>
<!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>Untitled Document</title>
<script language="javascript" type="text/javascript">
function showCompany(catid) {
document.frm.submit();
}
</script>
</head>
<body>
<form action="" method="post" name="frm" id="frm">
<table width="500" border="0">
<tr>
<td width="119">Category</td>
<td width="371">
<select name="cat_id" id="cat_id" onChange="showCompany(this.value);">
<option value="">--Select--</option>
<?php
$sql1="select * from category";
$sql_row1=mysql_query($sql1);
while($sql_res1=mysql_fetch_assoc($sql_row1))
{
?>
<option value="<?php echo $sql_res1["id"]; ?>" <?php if($sql_res1["id"]==$_REQUEST["cat_id"]) { echo "Selected"; } ?>><?php echo $sql_res1["category_name"]; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Company</td>
<td id="td_company">
<select name="company_id" id="company_id">
<option value="">--Select--</option>
<?php
$sql="select * from company where cat_id='$_REQUEST[cat_id]'";
$sql_row=mysql_query($sql);
while($sql_res=mysql_fetch_assoc($sql_row))
{
?>
<option value="<?php echo $sql_res["id"]; ?>"><?php echo $sql_res["company_name"]; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
Output
After clicking combo.php.
When we select Electronics its output in company combobox.
When we select Mobiles its output in company combobox.
Thanks for reading..