Due to a few PM's asking for a third box or example for the SQL side i have decided to update the script, i have tried to keep it simple.. i have include the SQL table structure and some sample data.. i hope it helps
<?php
/*
-- SQL Data
--
-- Table structure for table `list1`
--
CREATE TABLE `list1` (
`ID` mediumint(8) NOT NULL auto_increment,
`Name` varchar(15) NOT NULL,
PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
--
-- Dumping data for table `list1`
--
INSERT INTO `list1` (`ID`, `Name`) VALUES
(1, 'Dogs'),
(2, 'Trees'),
(3, 'Apples');
-- --------------------------------------------------------
--
-- Table structure for table `list2`
--
CREATE TABLE `list2` (
`ID` mediumint(8) NOT NULL auto_increment,
`List1Ref` mediumint(8) NOT NULL,
`Name` varchar(20) NOT NULL,
PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
--
-- Dumping data for table `list2`
--
INSERT INTO `list2` (`ID`, `List1Ref`, `Name`) VALUES
(1, 1, 'Sleep in'),
(2, 1, 'Bark at'),
(3, 2, 'Grow'),
(4, 2, 'Are'),
(5, 3, 'are coloured'),
(6, 3, 'Taste');
-- --------------------------------------------------------
--
-- Table structure for table `list3`
--
CREATE TABLE `list3` (
`ID` mediumint(8) NOT NULL auto_increment,
`List2Ref` mediumint(8) NOT NULL,
`Name` varchar(20) NOT NULL,
PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;
--
-- Dumping data for table `list3`
--
INSERT INTO `list3` (`ID`, `List2Ref`, `Name`) VALUES
(1, 1, 'Baskets'),
(2, 1, 'on the couch'),
(3, 2, 'Cats'),
(4, 2, 'Postmen'),
(5, 3, 'slowly'),
(6, 4, 'green'),
(7, 5, 'Red'),
(8, 5, 'Green'),
(9, 6, 'Nice'),
(10, 6, 'Not nice');
*/
$hostname = "localhost";
$username = "root";
$password = "";
?>
<?php
$dbh = mysql_connect($hostname, $username, $password)
or die("Unable to connect to MySQL");
$selected = mysql_select_db("ajax_test",$dbh);
if( isset($_POST['Submit']) )
{
echo "<pre>";
print_r($_POST);
}
if( isset($_GET['ajax']) )
{
//In this if statement
switch($_GET['ID'])
{
case "LBox2":
$query = sprintf("SELECT * FROM list2 WHERE List1Ref=%d",$_GET['ajax']);
break;
case "LBox3":
$query = sprintf("SELECT * FROM list3 WHERE List2Ref=%d",$_GET['ajax']);
break;
}
$result = mysql_query($query);
echo "<option value=''></option>";
while ($row = mysql_fetch_assoc($result))
{
echo "<option value='{$row['ID']}'>{$row['Name']}</option>\n";
}
mysql_close($dbh);
exit; //we're finished so exit..
}
if (!$result = mysql_query("SELECT * FROM list1"))
{
echo "Database is down";
}
//for use with my FIRST list box
$List1 = "";
while ($row = mysql_fetch_assoc($result))
{
$List1 .= "<option value='{$row['ID']}'>{$row['Name']}</option>\n";
}
?>
<!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>Simple Dymanic Drop Down</title>
<script language="javascript">
function ajaxFunction(ID, Param)
{
//link to the PHP file your getting the data from
//var loaderphp = "register.php";
//i have link to this file
var loaderphp = "<?php echo $_SERVER['PHP_SELF'] ?>";
//we don't need to change anymore of this script
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch(e){
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//the line below reset the third list box incase list 1 is changed
document.getElementById('LBox3').innerHTML = "<option value=''></option>";
//THIS SET THE DAT FROM THE PHP TO THE HTML
document.getElementById(ID).innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET", loaderphp+"?ID="+ID+"&ajax="+Param,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<!-- OK a basic form-->
<form method="post" enctype="multipart/form-data" name="myForm" target="_self">
<table border="0">
<tr>
<td>
<!--
OK here we call the ajaxFuntion LBox2 refers to where the returned date will go
and the this.value will be the value of the select option
-->
<select name="list1" id="LBox1" onchange="ajaxFunction('LBox2', this.value);">
<option value=''></option>
<?php
echo $List1;
?>
</select>
</td>
<td>
<select name="list2" id="LBox2" onchange="ajaxFunction('LBox3', this.value);">
<option value=''></option>
<!-- OK the ID of this list box is LBox2 as refered to above -->
</select>
</td>
<td>
<select name="list3" id="LBox3">
<option value=''></option>
<!-- OK the ID of this list box is LBox3 Same as above -->
</select>
</td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>
Same as above without MySQL
<?php
if( isset($_GET['ajax']) )
{
//In this if statement
switch($_GET['ID'])
{
case "LBox2":
$Data[1] = array(10=>"-Tom", 20=>"Jimmy");
$Data[2] = array(30=>"Bob", 40=>"-MadTechie");
$Data[3] = array(50=>"-One", 60=>"Two");
break;
//Only added values for -Tom, -MadTechie and -One (10,40,50)
case "LBox3":
$Data[10] = array(100=>"One 00", 200=>"Two 00");
$Data[40] = array(300=>"Three 00");
$Data[50] = array(1000=>"10000");
break;
}
echo "<option value=''></option>";
foreach($Data[$_GET['ajax']] as $K => $V)
{
echo "<option value='$K'>$V</option>\n";
}
mysql_close($dbh);
exit; //we're finished so exit..
}
$Data = array(1=>"One", 2=>"Two", 3=>"Three");
$List1 = "<option value=''></option>";
foreach($Data as $K => $V)
{
$List1 .= "<option value='$K'>$V</option>\n";
}
?>
<!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>Simple Dymanic Drop Down</title>
<script language="javascript">
function ajaxFunction(ID, Param)
{
//link to the PHP file your getting the data from
//var loaderphp = "register.php";
//i have link to this file
var loaderphp = "<?php echo $_SERVER['PHP_SELF'] ?>";
//we don't need to change anymore of this script
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch(e){
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//the line below reset the third list box incase list 1 is changed
document.getElementById('LBox3').innerHTML = "<option value=''></option>";
//THIS SET THE DAT FROM THE PHP TO THE HTML
document.getElementById(ID).innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET", loaderphp+"?ID="+ID+"&ajax="+Param,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<!-- OK a basic form-->
<form method="post" enctype="multipart/form-data" name="myForm" target="_self">
<table border="0">
<tr>
<td>
<!--
OK here we call the ajaxFuntion LBox2 refers to where the returned date will go
and the this.value will be the value of the select option
-->
<select name="list1" id="LBox1" onchange="ajaxFunction('LBox2', this.value);">
<?php
echo $List1;
?>
</select>
</td>
<td>
<select name="list2" id="LBox2" onchange="ajaxFunction('LBox3', this.value);">
<option value=''></option>
<!-- OK the ID of this list box is LBox2 as refered to above -->
</select>
</td>
<td>
<select name="list3" id="LBox3">
<option value=''></option>
<!-- OK the ID of this list box is LBox3 Same as above -->
</select>
</td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>
