Cascading Dropdown Boxes - php

Question

I have used various script and attempted to modify them to suit my database, but this is what I want to Achieve
MySQL Database, single table "Carlist"
I want to put together a form where the user will select a "Make" from the database, this will then filter the 2nd Dropdown box for "Model" where then the third dropdown box will filter out the different variants of that particular model.
MY Database has the fields Make, Model and Version
Box 1: SELECT DISTINCT Make FROM Carlist SORT BY Make
Box 2: SELECT Distinct Model FROM Carlist WHERE Make=$Make SORT BY Model
Box 3: SELECT DISTINCT Version FROM Carlist WHERE Make=$Make AND Model=$Model SORT BY Version
I would also like to put in a mechanism where the 2nd and third boxes could not be selected until the previous box had been
All the scripts I have come across utilise more than one table in the database, at the moment my database has over 1500 records.
If anyone has any useful links or advice on this that would be great, as mentioned I have tried to modify other peoples scripts without success, but those scripts were designed for multiple tables

Answer 1

Assuming that you're trying to fill an HTML form, use Ajax to get the appropriate drop box values from the database after each selection.

Answer 2

Got a solution, code is as follows:
<?php
/* Written for Khaoskreations 2010-06-13 */
//db connect code
require "config.php"; // Your Database details
$query = "SELECT * FROM Carlist ";
$result = mysql_query($query);
//==============================================================================build arrays from db
$Make = array();
$Model = array();
$Version = array();
if (!$result) echo "Error: ".mysql_error();
else {
$Make_group = "";
$Model_group = "";
$num = mysql_num_rows($result);
for ($i = 0;$i<$num;$i++) {
$r = mysql_fetch_array($result);
if ($r['Make'] != $Make_group) {
$Make[$r['Make']] = $r['Make'];
$Model[$r['Make']][$r['Model']] = $r['Model'];
$Version[$r['Make']][$r['Model']][$r['Version']] = $r['Version'];
$Make_group = $r['Make'];
$Model_group = $r['Make'];
} else if ($r['Model'] != $Model_group) {
$Model[$r['Make']][$r['Model']] = $r['Model'];
$Version[$r['Make']][$r['Model']][$r['Version']] = $r['Version'];
$Model_group = $r['Make'];
} else {
$Version[$r['Make']][$r['Model']][$r['Version']] = $r['Version'];
}
}
}
//==============================================================================create scripts
$script = "\n<script type='text/javascript'>\n";
//build last name array
$script .= "var Make = new Array(";
$list = "";
foreach ($Make as $key => $val) {
$list .= " \"".$val."\",";
//echo $val ."<br />";
}
$list = substr($list, 0, -1);
$list .= " );\n";
$script .= $list;
$list = "";
//build Model array
$script .= "\nvar Model = new Array();";
foreach ($Model as $Maken => $fary) {
$list .= "\nModel[\"".$Maken."\"] = new Array(";
foreach ($fary as $key => $value) {
$list .= " \"". $value . "\",";
}
$list = substr($list, 0, -1);
$list .= " );";
}
$script .= $list;
$list = "";
//build Version array
$list = "\nvar Version = new Array();";
foreach ($Version as $Maken => $fary) {
$list .= "\nVersion[\"".$Maken."\"] = new Array();";
foreach ($fary as $Modeln => $aary) {
$list .= "\nVersion[\"".$Maken."\"][\"".$Modeln."\"] = new Array(";
foreach ($aary as $key => $value) {
$list .= " \"" . $value . "\",";
}
$list = substr($list, 0, -1);
$list .= " );";
}
}
$script .= $list;
//script functions to update tiers
$script .= <<< EOSCRIPT
function resetForm(theForm) {
theForm.Makes.options[0] = new Option("--- Select Make ---", "");
for (var i=0; i<Make.length; i++) {
theForm.Makes.options[i+1] = new Option(Make[i], Make[i]);
}
theForm.Makes.options[0].selected = true;
theForm.Models.options[0] = new Option("--- Select Model ---", "");
theForm.Models.options[0].selected = true;
theForm.Version.options[0] = new Option("--- Select Version ---", "");
theForm.Version.options[0].selected = true;
document.getElementById("selectbox").innerHTML = "";
}
function reloadForm(theForm,Manufacturer,product,specific) {
theForm.Makes.options[0] = new Option("--- Select Version ---", "");
for (var i=0; i<Make.length; i++) {
theForm.Makes.options[i+1] = new Option(Make[i], Make[i]);
if (Manufacturer == Make[i]) theForm.Makes.options[i+1].selected = true;
}
document.getElementById("selectbox").innerHTML = "here";
var fn = Model[Manufacturer];
theForm.Models.options.length = 0;
for (var i=0; i<fn.length; i++) {
theForm.Models.options[i] = new Option(fn[i], fn[i]);
if (product == fn[i]) {
theForm.Models.options[i].selected = true;
}
}
var Versions = Version[Manufacturer][product];
theForm.Version.options.length = 0;
for (var i=0; i<Versions.length; i++) {
theForm.Version.options[i] = new Option(Versions[i], Versions[i]);
if (specific == Versions[i][0]) {
theForm.Version.options[i].selected = true;
}
}
document.getElementById("selectbox").innerHTML = "You selected person #"+specific;
}
function updateproducts(theForm) {
var lname = theForm.Makes.options[theForm.Makes.options.selectedIndex].value;
var fnames = Model[lname];
theForm.Models.options.length = 0;
for (var i=0; i<fnames.length; i++) {
theForm.Models.options[i] = new Option(fnames[i], fnames[i]);
}
var findex = theForm.Models.options[theForm.Models.options.selectedIndex].value;
var Versions = Version[lname][findex];
theForm.Version.options.length = 0;
for (var i=0; i<Versions.length; i++) {
theForm.Version.options[i] = new Option(Versions[i], Versions[i]);
}
theForm.Version.options[0].selected = true;
}
function updateVersion(theForm) {
var lname = theForm.Makes.options[theForm.Makes.options.selectedIndex].value;
var findex = theForm.Models.options[theForm.Models.options.selectedIndex].value;
var Versions = Version[lname][findex];
theForm.Version.options.length = 0;
for (var i=0; i<Versions.length; i++) {
theForm.Version.options[i] = new Option(Versions[i], Versions[i]);
}
theForm.Version.options[0].selected = true;
}
</script>
EOSCRIPT;
$reload_script = "";
if ($_POST['Makes'] != "" && $_POST['Models'] != "") {
$reload_script .= "<script type='text/javascript'> "
."reloadForm(document.vehicleform,'".$_POST['Makes']."','".$_POST['Models']."',".$_POST['Version'].");"
."</script>";
} else {
$reload_script .= "<script type='text/javascript'>"
."resetForm(document.vehicleform);"
."</script>";
}
//============================================================================== build page
$page = <<< EOPAGE
<html>
<head>
{$script}
</head>
<body>
<form method="post" action="test3.php" name='vehicleform'>
<select name='Makes' onchange="updateproducts(this.form)"></select><BR>
<select name="Models" onchange="updateVersion(this.form)"></select><BR>
<select name="Version"></select>
<input type='button' value='Reset' onclick='resetForm(document.vehicleform)'/>
<input type='submit' value='Reload'/>
</form>
<div id='selectbox'></div>
{$reload_script}
</body>
</html>
EOPAGE;
echo $page;
?>