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