Cascading Dropdown Boxes

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

假设您要填写HTML表单，请在每次选择后使用Ajax从数据库中获取适当的保管箱值。

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;

?>